• 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 { 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>
    

      

  • 相关阅读:
    切片 Slice
    表单与v-model
    vue-内置指令
    go单元测试
    go异常处理
    设计模式
    django数据库事务
    go interface衍生的插件化处理
    goroutine
    drf之序列化
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/13940853.html
Copyright © 2020-2023  润新知