欢迎光临
我的个人博客网站

JS获取本机地址,生成地图

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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » JS获取本机地址,生成地图
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏