Question

百度地图API怎样实现拖动标注实时更新位置数据

Answer 1

首先应用百度地图API：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的密钥"></script>

<div id="l-map"></div> <!---加载地图------>
<input type="text" id="suggestId"><!---放置地图数据------>
<input type="text" id='zuobiao'><!---放置坐标数据------>

下面的是script中的代码：

var map = new BMap.Map("l-map");
map.centerAndZoom("北京",14); // 初始化地图,设置城市和地图级别。

var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "suggestId"
,"location" : map
});
var point = new BMap.Point(经纬度坐标);
map.centerAndZoom(point,14);
var geoc = new BMap.Geocoder();

var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging(); //设置可拖拽
marker.addEventListener("dragend", function(e){ //拖动事件
var pt = e.point;
var dizhi;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
dizhi = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
document.getElementById('suggestId').value = dizhi;//更新地址数据
var content = dizhi + "<br/><br/>经度：" + e.point.lng + "<br/>纬度：" + e.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
marker.openInfoWindow(infoWindow,map.getCenter());//将经纬度信息显示在提示框内
});
document.getElementById("zuobiao").value = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标。