當前位置:編程學習大全網 - 源碼下載 - 百度地圖API怎樣實現拖動標註實時更新位置數據

百度地圖API怎樣實現拖動標註實時更新位置數據

首先應用百度地圖API:

<script type="text/javascript" src="/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;//打印拖動結束坐標。

  • 上一篇:支付寶付款碼免密支付額度設置
  • 下一篇:人民幣成全球第四位支付貨幣,有哪些重大意義?
  • copyright 2024編程學習大全網