美文网首页
点击地图获取完整地址信息

点击地图获取完整地址信息

作者: 简小园 | 来源:发表于2019-06-01 12:43 被阅读0次
    点击地图获取完整地址信息
    <button @click="ready">我的位置</button>
    <div id="allmap"></div>
    

    在js里引入import BMap from 'BMap';
    引入外部图片import imgIcon from '../assets/img/icon/map_icon.png';

    ready(){
      let that=this;
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
    
          // 创建地图
          let map = new BMap.Map("allmap");
          let point = new BMap.Point(r.point);
          map.centerAndZoom(point,15);
          map.enableScrollWheelZoom(true);//开启滚动
    
          var mk = new BMap.Marker(r.point);
          let icon = new BMap.Icon(imgIcon,new BMap.Size(20,22));
          map.addOverlay(mk);
          map.panTo(r.point);
          $.ajax({
              url:'http://api.map.baidu.com/geocoder/v2/?ak=你的密钥&callback=renderReverse&callback=renderReverse&location=' + r.point.lat + ',' + r.point.lng + '&output=json&pois=1',
              dataType: 'jsonp',
              success: function(res) {
                if (res.result.poiRegions==""||res.result.poiRegions==null) {
                  var result=res.result.formatted_address+res.result.sematic_description;
                }else {
                  var result=res.result.formatted_address+res.result.poiRegions[0].name;
                }
                alert(result);
              },
              error:function(){alert("没找到地址信息");}
          });
    
          //地图监听事件
          map.addEventListener('click', function (e) {
            map.removeOverlay(mk);
            mk = new BMap.Marker(e.point,{icon:icon});
            map.addOverlay(mk);
            $.ajax({
                url:'http://api.map.baidu.com/geocoder/v2/?ak=你的密钥&callback=renderReverse&callback=renderReverse&location=' + e.point.lat + ',' + e.point.lng + '&output=json&pois=1',
                dataType: 'jsonp',
                success: function(res) {
                  if (res.result.poiRegions==""||res.result.poiRegions==null) {
                    var result=res.result.formatted_address+res.result.sematic_description;
                  }else {
                    var result=res.result.formatted_address+res.result.poiRegions[0].name;
                  }
                  alert(result);
                },
                error:function(){alert("没找到地址信息");}
            });
          });
        }else {alert('failed'+this.getStatus());}
      });
    }
    

    相关文章

      网友评论

          本文标题:点击地图获取完整地址信息

          本文链接:https://www.haomeiwen.com/subject/nkcftctx.html