百度地图显示标识点

分手后的思念是犯贱 2022-06-07 23:59 414阅读 0赞

**现象：**  
调用百度地图显示多个标识点

**方法：**  
（1）：  
![这里写图片描述][SouthEast]

页面的详细展示：

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>执行打卡页面</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../../css/mui.min.css" rel="stylesheet" /> </head> <style type="text/css"> body{ font-size:14px;} .mui-content table{ color: #555555; margin:10px auto; border-collapse: collapse; } .mui-content tr{ line-height:30px;} .mui-content,body { background:#ffffff; } .BMap_cpyCtrl { //隐藏地图下面的超链接 display:none; } .anchorBL{ display:none; } .demo_main { padding: 0px; padding-top: 0px;} .demo_title { padding: 0px; margin-bottom: 0px; background-color: #D3D8E0;text-align:center;} .demo_content { padding: 0px; margin-bottom: 0px;} </style> <body> <div class="mui-content" style="padding: 10px; margin-top: 60px;"> <div id="map-layout"> <div class="demo_main"> <fieldset class="demo_title"> 当前位置 </fieldset> <fieldset class="demo_content"> <div style="min-height: 300px;" id="map"></div> </fieldset> </div> </div> </div> <script src="../../js/mui.min.js"></script> var markerArr=new Array; mui.toast("正在获取当前位置,请稍后！"); //获取地址方法 function onPlusReady() { plus.geolocation.getCurrentPosition( successGetAddress, function(e){mui.toast("获取地址信息失败！！！点击右上角刷新")}); } //成功获取地址信息函数 function successGetAddress(p){ var adds=document.getElementById('address') var po; if(p.address.poiName==undefined){ po="附近"; }else{ po=p.address.poiName+"附近"; } var adds=p.address.province+p.address.city+p.address.district+p.address.street+po markerArr = [{ title: "时间", points:p.coords.longitude+","+p.coords.latitude, address:adds, time:(new Date()).Format("yyyy-MM-dd hh:mm:ss") }]; mui.toast("地址获取成功"); map_load(); } //刷新地址的方法 document.getElementById("refresh").addEventListener('tap',function(){ onPlusReady(); }) var map; //Map实例 function map_init() { map = new BMap.Map("map"); //设置地图中心点 if(markerArr.length>0){ var s=markerArr[0].points.split(",")[0]; var d=markerArr[0].points.split(",")[1]; var point = new BMap.Point(s,d); }else{ var point = new BMap.Point(114.110951,22.542484); } //初始化地图,设置地图大小级别。 map.centerAndZoom(point, 13); //启用滚轮放大缩小 map.enableScrollWheelZoom(true); //向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].points.split(",")[0]; var p1 = markerArr[i].points.split(",")[1]; var index = i; plus.maps.Map.convertCoordinates(new plus.maps.Point(p0,p1), {},function successCallback(event){ //将第三方坐标系坐标转换成当前地图的坐标系坐标 var pointb = event.coord; //转换后的坐标值 var maker = addMarker(new window.BMap.Point(pointb.longitude, pointb.latitude)); addInfoWindow(maker, markerArr[index]); }, function errorCallback(e){ mui.toast('地址获取异常！'); } ); } } // 添加标注 function addMarker(point, index) { var marker = new BMap.Marker(point); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title+":"+poi.time + '</div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>'); html.push('</tr>'); html.push('</tbody></table>'); var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 }); marker.openInfoWindow(infoWindow); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun); } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } </script> </body> </html>

[SouthEast]: /images/20220608/ff3cc8711c21480caf06319467b429cd.png