点击百度地图添加标注并获取当前地理名称

    xiaoxiao2021-04-17  39

    html部分:

    <div id="allmap"></div>

    <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style>

    js部分:

    <script defer type="text/javascript"> // 百度地图API功能 var x=""; var y=""; var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point , 11); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 setTimeout(function(){ map.setZoom(14); }, 1000); //2秒后放大到14级 map.enableScrollWheelZoom(true); //缩放地图 map.addEventListener("click", showInfo); function showInfo(e){ x=e.point.lng; //获取鼠标当前点击的经纬度 y=e.point.lat; if(x != "" && y != ""){ clearAll(); //清除地图上存在的标注 var point = new BMap.Point(x,y); map.centerAndZoom(point); marker = new BMap.Marker(point); // 创建新的标注 map.addOverlay(marker); //将标注添加到地图上 }else{ map.centerAndZoom("北京", 12); } var point = new BMap.Point(x,y); //获取当前地理名称 var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); });} function clearAll(e){ map.removeOverlay(marker); }</script>

    样式截图:

    转载请注明原文地址: https://ju.6miu.com/read-674140.html

    最新回复(0)