腾讯地图初始化以及解析和逆解析

腾讯地图：

开发文档：

JavaScript API | 腾讯位置服务

index.html中引入

 

老版地图进行初始化，并根据定位打点：

<div id="container" style="width:100%;height:500px;"></div>

export default {
  name: 'baidumap',
  components: {},
  data() {
    return {
      QQlatitude: '',
      QQlongitude: '',
      QQmap: null
    }
  },
  methods: {
    //定位获得当前位置信息
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation()
      document.getElementById('container').style.height = '500px'
      var options = { timeout: 9000 }
      geolocation.getLocation(this.showPosition, this.showErr, options)
},
    showPosition(position) {
      this.initMap(position.lat, position.lng, true) //初始化地图
    },
    showErr() {
      console.log('定位失败')
      this.initMap(39.98412, 116.307484, false) //初始化地图
},
//初始化地图
    initMap(lat, lng, isCurrentPositoon = false) {
      let _this = this
      var container = document.getElementById('container')
      //定义地图中心点坐标
      var center = new qq.maps.LatLng(lat, lng)
      this.QQmap = new qq.maps.Map(container, {
        center: center, //设置地图中心点坐标
        zoom: 9 //3-20设置地图缩放级别
      })
      if (isCurrentPositoon) {//定位成功进行打点
        let anchor = new qq.maps.Point(6, 6)
        let size = new qq.maps.Size(25, 50)
        let origin = new qq.maps.Point(0, 0)
        let icon = new qq.maps.MarkerImage(myMarkImg, size, origin, anchor)
        let marker = new qq.maps.Marker({
          icon: icon,
          map: _this.QQmap,
          position: _this.QQmap.getCenter()
        })
      }
    }
  },
  mounted() {
    this.getMyLocation()
  }
}
</script>

初始化地图并监听点击事件，以及正向逆向地址解析

 //初始化地图并监听点击事件
    initMap() {
      let _this=this
      var container = document.getElementById("container");
        //定义地图中心点坐标
        var center=new qq.maps.LatLng(39.984120,116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        this.QQmap = new qq.maps.Map(container, {
            center: center,//设置地图中心点坐标
            zoom:9   //3-20设置地图缩放级别
        });       
        var listener = qq.maps.event.addListener(_this.QQmap, 'click',
          function(event) {
              let geocoder = new qq.maps.Geocoder({
                  complete:function(result){
					//根据点击的经纬度，获取详细地址信息
                        console.log (result.detail.addressComponents)
                        _this.markersset(result.detail.location)
                  }
              });
//传入数据（纬度,经度）
              var coord=new qq.maps.LatLng(event.latLng.lat,event.latLng.lng);
              geocoder.getAddress(coord);
          }
      );
    },
    //详细地址搜索
    searchMap(address){
      let _this=this
      let geocoder = new qq.maps.Geocoder();
      geocoder.getLocation(address);
      geocoder.setComplete(function(result) {//设置服务请求成功的回调函数
console.log (result.detail. location) //根据详细地址获取经纬度
        _this.markersset(result.detail.location)
      });
    },
    //打点
    markersset(e){
      this.marker&&this.marker.setMap(null)
      setTimeout(()=>{
        this.marker=new qq.maps.Marker({
          position:new qq.maps.LatLng(e.lat,e.lng),
          animation:qq.maps.MarkerAnimation.DROP,
          map: this.QQmap
        });
      },200)
    },

新版地图进行初始化，并根据定位打点：

<div id="dpMap" style="width:100%;height:500px;"></div>

export default {
  name: 'baidumap',
  components: {},
  data() {
    return {
      QQlatitude: '',
      QQlongitude: '',
      dpQQmap: null
    }
  },
  methods: {
    //定位获得当前位置信息
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation()
      document.getElementById('dpMap').style.height = '500px'
      var options = { timeout: 9000 }
      geolocation.getLocation(this.showPosition, this.showErr, options)
    },
    showPosition(position) {
      this.dpInitMap(position.lat, position.lng, true)
    },
    showErr() {
      console.log('定位失败')
      this.dpInitMap(39.98412, 116.307484, true)
    },
    dpInitMap(lat,lng,isCurrentPositoon=false) {
      let _this=this
      var container = document.getElementById("dpMap");
        var center=new TMap.LatLng(lat,lng) //定义地图中心点坐标
        //创建地图
        this.dpQQmap = new TMap.Map(container, {
            center: center,//设置地图中心点坐标
            zoom:9,   //3-20设置地图缩放级别
            // mapStyleId: 'style1', //设置样式ID
            viewMode:'2D',
            baseMap: {      //底图设置（参数为：VectorBaseMap对象）
              type: 'vector', //类型：失量底图
              features: ['base', 'building2d','point']//目前支持道路及底面（base）、建筑物（building3d）、建筑物平面(building2d)、poi文字（point）、道路文字（label）
            }
        });
        if(isCurrentPositoon){
          var marker = new TMap.MultiMarker({
            id: "marker-me", //图层id
            map: _this.dpQQmap,
            styles: { //点标注的相关样式
                "markerMe": new TMap.MarkerStyle({
                    "width": 15,
                    "height": 30,
                    "anchor": { x: 16, y: 32 },
                    "src": myMarkImg
                })
            },
            geometries: [//我的点标记
              {
                "id": "myposition",
                "styleId": "markerMe",
                "position": new TMap.LatLng(lat, lng),
                "properties": {
                    "title": "markerMe"
                }
              }]
        });
        }
    }
  },
  mounted() {
    this.getMyLocation()
  }
}
</script>

 

新版地图， TMap根据 new TMap.service.Geocoder() 正逆地址解析类：

 var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
 geocoder.getAddress({ location: new TMap.LatLng(39.98412, 116.307484) }).then((result) => {
   result.result.address;// 显示搜索到的地址
 });
   
 geocoder.getLocation({ address: '北京市快手总部' }).then((result) => {
   result.result.location// 显示坐标数值
 });

打点后，移除打点，再重新打点，报错：Map中已存在id问题解决：