码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-11-07 17:45:46      阅读:44      评论:0      收藏:0      [点我收藏+]

标签:功能   RKE   idt   scom   position   length   control   gpo   navig   

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>

  

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

标签:功能   RKE   idt   scom   position   length   control   gpo   navig   

原文地址:https://www.cnblogs.com/smileZAZ/p/13940853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!