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

Posted 2023-05-06

参考技术A 首先应用百度地图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;//打印拖动结束坐标。

百度地图API,在地图上添加了一个标注,怎么才能让这个标注随着地图缩放而缩放呢?

把下面的代码加到您最后面的javascript里

var navigationControl = new BMap.NavigationControl(
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
);
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e)
// 定位成功事件
var address = \'\';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
);
geolocationControl.addEventListener("locationError",function(e)
// 定位失败事件
alert(e.message);
);
map.addControl(geolocationControl);

此代码时控制地图缩放的代码 参考技术A 一直就那么大的 不会缩放本回答被提问者采纳