- A+
所属分类：Web前端
dome代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图dome</title> <!-- baidu map --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script> </head> <body> <div id = "allmap"></div> </body> </html> <script type="text/javascript"> var geolocation = new BMap.Geolocation(); var userData = {}; geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ mk = new BMap.Marker(r.point); getAddress(r.point); }else { alert('failed'+this.getStatus()); } }); //获取地址信息，设置地址label function getAddress(point){ var gc = new BMap.Geocoder(); gc.getLocation(point, function(res){ console.log(res); //百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(res.point.lng,res.point.lat),30);//根据坐标初始化地图 map.enableScrollWheelZoom(true); map.addControl(new BMap.NavigationControl()); //平移缩放控件 map.addControl(new BMap.ScaleControl()); //比例尺 map.addControl(new BMap.OverviewMapControl()); //缩略地图 map.addControl(new BMap.MapTypeControl()); //地图类型 map.setCurrentCity(res.addressComponents.city); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 //添加标注 var marker = new BMap.Marker(new BMap.Point(res.point.lng,res.point.lat)); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.addEventListener('click', mapClickFun); for(var i=0;i<res.surroundingPois.length;i++){ var marker = new BMap.Marker(new BMap.Point(res.surroundingPois[i].point.lng,res.surroundingPois[i].point.lat)); // 创建标注 marker.data = res.surroundingPois[i]; map.addOverlay(marker); // 将标注添加到地图中 marker.addEventListener('click', (e)=>{ console.log(this); mapClickFun(e,marker.data); }); } }); } function mapClickFun(e,data){ // 通过点击的坐标创建一个点对象，添加标签 console.log(e); console.log(data); var point = new BMap.Point(e.point.lng, e.point.lat); var opts = { title: "店铺详情：", enableMessage: false, } if(data == undefined){ opts.title = "本机地址" var infowindow = new BMap.InfoWindow("经度：" + e.point.lng + "<br/>纬度" + e.point.lat, opts); map.openInfoWindow(infowindow, point); }else{ } } </script>
