百度地图API接口 地图标注 地址经纬度解析

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wlinshan/article/details/51362161

 

先看代码:

 

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
 #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
 #r-result{height:100%;width:20%;float:left;}
 </style>
 <script type="text/javascript" src="
http://api.map.baidu.com/api?v=1.5&ak=(此处需要提供有效的百度LBS开放平台密钥,可到百度地图开放平台申请JavaScriptAPI授权)"></script>
 <title>单击获取点击的经纬度</title>
</head>
<body>
 <div>
  城市:
  <input type="text" id="city" name="city" value="上海">
  地图级别:
  <input type="text" id="zoom" name="zoom" value="15">
  <input type="button" id="b1" name="查询" value="城市查询" οnclick="searchPoint()">(选择的城市、地图级别,地图拉到所关注的区域,点击地图上某个点,数据显示在经纬度文本框中)
 </div>
 <div>
  经度:
  <input type="text" id="lng" name="lng" >
  纬度:&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="text" id="lat" name="lat" >
  <input type="button" id="b2" name="bz" value="地图标注" οnclick="markPoint()">(输入经纬度在地图上显示)
 </div>
 <div>
  地址:
  <input type="text" id="addr" name="addr" size="60">
  <input type="button" id="b23" name="bza" value="地址解析" οnclick="locationPoint()">
 </div> 
 <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 创建Map实例
var map = new BMap.Map("allmap");
// 初始化地图,设置城市和地图级别。
map.centerAndZoom("上海", 15);
// 启用滚轮放大缩小,默认禁用
map.enableScrollWheelZoom();
// 启用地图惯性拖拽,默认禁用  
map.enableContinuousZoom();
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
// 添加缩略地图控件
map.addControl(new BMap.OverviewMapControl());
// 添加默认缩放平移控件 
map.addControl(new BMap.NavigationControl());

var marker;
map.addEventListener("click", function(e) {
 document.getElementById("lng").value = e.point.lng;
 document.getElementById("lat").value = e.point.lat;

 var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);
 if (marker)
  map.removeOverlay(marker);
 marker = new BMap.Marker(locPoint);
 map.addOverlay(marker);
 alert(e.point.lng + "," + e.point.lat);
 map.centerAndZoom(locPoint, 15);
});

function searchPoint() {
 var newCity = document.getElementById("city").value;
 var newZoom = document.getElementById("zoom").value;
 document.getElementById("lng").value = '';
 document.getElementById("lat").value = '';
 map.centerAndZoom(newCity, newZoom);
}

function markPoint() {
 var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);

 if (marker)
  map.removeOverlay(marker);
 marker = new BMap.Marker(locPoint);
 map.addOverlay(marker);
 map.centerAndZoom(locPoint, 14);
}

function locationPoint() {
 
 var myGeo = new BMap.Geocoder();
 myGeo.getPoint(document.getElementById("addr").value, function(point){
  if(point){
   document.getElementById("lng").value = point.lng;
   document.getElementById("lat").value = point.lat;
   map.centerAndZoom(point, 14);
   if (marker)
    map.removeOverlay(marker);
   marker = new BMap.Marker(point);
   map.addOverlay(marker);
  }
 });

}
</script>

 

 

解释:

1、百度开放平台在线实例DEMO:http://developer.baidu.com/map/jsdemo.htm#a1_2
2、HEAD部分调用JavaScriptAPI处,需要将”ak=“后的内容替换为有效的百度LBS开放平台密钥。如ak=123456789

 

 

展开阅读全文

没有更多推荐了,返回首页