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="http://www.bigemap.com/Public/css/button.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:60px;
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.zhongkexingtu', {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>