腾讯地图实现站点标记，及已标记的点回显在地图上

创建map实例

参考官方文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic

按照基础入门的使用步骤，你可以得到一张地图：

//初始化地图
this.map = new TMap.Map('container', {
	center: new TMap.LatLng(39.984120, 116.307484),
	zoom: 15,
});

若是想指定地图的中心点，可以获取当前位置的经纬度设置在全局使用：
data内设置new TMap.LatLng(）。

关于引入以及使用过程中的相关问题在文末有对应的描述及解决方案，请自行查看。

创建marker图层

文档api：https://lbs.qq.com/webApi/javascriptGL/glGuide/glMarker

	  //初始化marker图层，加该判断条件的目的是marker图层的初始化只执行一次，否则回显点标记的时候会旧图层层叠性低于新图层，点标记不显示
      if (this.markerLayer == null) {
        this.markerLayer = new TMap.MultiMarker({
          id: 'marker-layer',
          map: this.map,
          geometries: [
            {
              position: new TMap.LatLng(纬度,经度),
              id: 'marker',
            },
          ],
        });
      }

在marker图层上我们可以添加点标记，修改点标记、删除点标记。
eg：

点标记及回显操作

讲在开头：
关于点标记，基本的增加、移除、更新操作都有对应的API，但是如若你想从始至终只用一个方法，那就建议使用点标记的更新操作：updateGeometries

使用的时候也是有点技巧在里面的：
注意看注释—>

//监听点击事件添加marker
this.map.on('click', (evt) => {
	//这两句是把你在图层上标记的点的经纬度存起来，需要的话把它显示在页面上
	this.form.stationLatitude = evt.latLng.lat;
	this.form.stationLongitude = evt.latLng.lng;
	//获取你的点图形数据的标志信息
	let data = this.markerLayer.getGeometryById('marker');
	//Object.assign()可是关键方法，添加和回显在一个marker图层上就是标注点位置position有则更新，无则创建
	Object.assign(data, {
		position: new TMap.LatLng(this.form.stationLatitude, this.form.stationLongitude),
	});
	//注意updateGeometries的参数格式
	this.markerLayer.updateGeometries([data]);
});

整体效果

一些问题

“ReferenceError: TMap is not defined”

这个报错一般出现在你通过引入script标签加载API服务的时候。

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

出现的场景一般是在SPA单页面应用使用的时候，虽然按官网索例引入使用的页面倒也没错，但是系统内还是无法找到你引入的内容。

解决方案

把引入API服务的方法放在pablic文件夹下面的index.html内

Cannot read properties of null (reading ‘id’)

这个一般出现在你调取初始化地图实例方法的时候，找不到地图容器。
像这种地图实例大多是放在弹窗内的，所以执行语句的时候弹窗内的元素还没被绘制，自然就找不到该容器。

解决方案

把调用方法写在$nextTick方法内

      this.$nextTick(() => {
        this._setstation('container');
      });

地图不会重绘，容器内出现多个地图实例

这个问题同我以往写到的Echarts相关文章内有类似情况，原因就是每次使用初始化地图实例的方法时，前一次的地图实例没有被销毁。
一般来说，这种map实例和Echarts实例展示在弹窗内，每次打开弹窗都需要把实例进行重绘。

解决方案

1、全局保存map实例（在data内定义对象存储map实例）
2、在调用创建map实例的方法时，先判断data中定义的map对象是否已经被赋值（是否已存在），若是则销毁实例。

//1、全局保存
data(){
	return{
	  map: null,//地图实例
      markerLayer: null,//marker图层
	}
}
//2、调用创建实例的方法内
if (this.map != null && this.map != '' && this.map != undefined) {
	this.map.destroy();
	this.markerLayer = null;
}