BIGEMPA Js API示例中心

逆地址解析(坐标位置描述)源代码展示

代码编辑区 运行 下载 还原
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--
        以下CSS地址请在安装软件了替换成本地的地址
        CSS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
    -->
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <!--
        JS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <style>
        html,body,#map { margin: 0; padding: 0; height: 100%;width: 100%}
        #info{
            width: 340px;
            position: absolute;
            top:10px;
            left: 50%;
            z-index: 10;
            margin-left: -170px;
            color: #155724;
            background-color: #d4edda;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: .25rem;
        }
        input{
            border: 1px solid #ccc;
            padding: 7px 5px;
            display: inline-block;
            width: 200px;
            border-radius: 3px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
        input:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
        #button{
            float: right;
        }
    </style>
</head>
<body>
<div id='map'></div>
<div id="info">
    <button id="button" class="button button-primary button-pill button-small">查询</button>
    <input type="text" id="input" placeholder="点击地图获取经纬度">
    <div id="result">

    </div>
</div>
<script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<script type="text/javascript">// 软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.baidu-map,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.googlemap-satellite', {center: [ 30,104], zoom: 3,attributionControl:false, zoomControl: true});

map.on('click',function (e) {
    var lng=(e.latlng.lng+180)%360+360;
    $('#input').val([lng%360-180,e.latlng.lat].map(v=>v.toFixed(6)).join(','));
});

$('#button').on('click',function () {
    $.ajax({
        url:'http://demo.bigemap.com/app/api/location?point='+$('#input').val().trim(),
        timeout:3000,
        dataType:'json',
        success:function (data) {
            if (data.status===0){
                $('#result').html(data.results.map(v=>v.name).join('-'));
            }else{
                $('#result').html('');
            }
        },
        error:function(){
            $('#result').html('');
        }
    });
});
</script>
</body>
</html>