高德地图打点获取点的坐标和名称

一、首先引入地图(代码在最后)

二、然后是打点获取坐标和名称的方法(代码在最后)

 重点!!!

如果不加上密钥的话可能会得不到数据名称

你想要的代码来了

// 密钥
window._AMapSecurityConfig={
  securityJsCode:''//你申请key之后的密钥
}


async initMap() {
      let AMap = await AMapLoader.load({
        key: "",//你申请的key
        version: "2.0",
        plugins: [
          "AMap.PolygonEditor",
          "AMap.Autocomplete",
          "AMap.PlaceSearch",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.ToolBar",
          "AMap.MapType",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
          "AMap.Geolocation",
          "AMap.Geocoder",
          "AMap.AMapUI",
          "AMap.ControlBar",
          "AMap.Marker",
        ],
      });
      this.map = new AMap.Map("container", {
        center: this.center,
        resizeEnable: true,
        zoom: 14,
        plugin: [
          // 一些工具插件
          {
            pName: "MapType", // 地图类型
            defaultType: 0,
            events: {
              init(instance) {},
            },
          },
        ],
      });

//下面是方法
showInfoClick(e) {
       var geocoder = new AMap.Geocoder({
       radius: 1000,
        extensions: "all"
    });
      //
      this.center = [];
      this.center.push(e.lnglat.getLng());
      this.center.push(e.lnglat.getLat());
      this.addMarker();
      
      var text =
        "您在 [ " +
        e.lnglat.getLng() +
        "," +
        e.lnglat.getLat() +
        " ] 的位置单击了地图!";
      console.log(text);

      // 翻译点的名称
        let lnglat=this.center
        let _this=this
        // console.log(lnglat, '----->>>')
        geocoder.getAddress(lnglat, function(status, result) {
          // console.log(status,result, '----->>>')
            if (status === 'complete'&&result.regeocode) {
                var address = result.regeocode.formattedAddress;
                let mapData={
                  address,
                  lnglat
                }
                //_this.$emit("selectLocation", mapData);
                // console.log(_this, '----->>>')
            }else{
                console.log('根据经纬度查询地址失败')
            }
        });
    
    },

 希望可以帮到你o(* ̄▽ ̄*)ブ

猜你喜欢

转载自blog.csdn.net/qq_47629187/article/details/125077616