vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 选点 （2）

地图选点 就干两个事儿        一：点击地图 出现marker（具体看自己的需求，我记录的是有且只有一个） 并记录经纬度   二：通过点击地图获取经纬度并且 逆地址解析 （通过经纬度查询出具体地址）

1、点击地图 出现marker（有且只有一个） 文档中并没有明确说怎么做

      我个人做法是 既然选择是有且只有一个 ，每次点击地图时，先移除所有marker 后 再创建一个marker

 2、在我上篇（1）中的 initMap 函数中加上下面代码可以实现点击地图marker有且只有一个

var markerFlag = null;

// 创建marker
function createMarker(latLng) {
        if (!markerFlag) {
          markerFlag = new TMap.MultiMarker({
            id: "marker-layer",
            map: map,
            geometries: [
              {
                id: "marker",
                styleId: "marker",
                position: latLng
              }
            ]
          });
        }
      }


//移除marker
function removeMarker() {
            if (markerFlag) {
                markerFlag.setMap(null);
                markerFlag = null;
            }
        }


map.on("click", ev => {
  console.log(ev) // 可以打印看看，ev.latLng 这个获取的经纬度是已经 new TMap.LatLng(latitude, longitude)  处理过的
  removeMarker()
  createMarker(ev.latLng);
})

 

3、根据点击地图获取经纬度 并进行 逆地址解析  （使用的是WebServiceAPI） 

// 在methods中写

// 既然marker有且 只有一个 那每次点击地图时获取的经纬度可以 赋值给data里面的 latitude 和 longitude   因为需要经纬度参数
getAddress() {
      const KEY = "写你自己的key"; //写你自己的key
      let url = "https://apis.map.qq.com/ws/geocoder/v1";
      this.$jsonp(url, {
        key: KEY,
        get_poi: 0,
        output: "jsonp",
        location: `${this.latitude},${this.longitude}` // 经纬度  String类型
      }).then(json => {
        console.log(json)  //这里你就可以看得到请求回来的东西啦   想怎么存取 自己的事儿

        console.log(json.result.formatted_addresses.recommend)
      }).catch(error => {
        console.log(error)
      })
}

// 在上一步中的 地图点击事件中写
map.on("click", evt => {
        this.latitude = evt.latLng.lat;
        this.longitude = evt.latLng.lng
        this.getAddress()
        removeMarker()
        createMarker(evt.latLng);
      });