vue2中使用腾讯地图

需要在项目中使用地图显示点位信息,所以引入了腾讯地图
但是按照腾讯开放平台示例运行报错
注意:后端返回数据是不同坐标系需要转换为地图相同坐标系

首先, 申请腾讯地图的key(简单说下)

• 注册
• 登录
• 应用管理 > 创建应用 > 添加key
• 按照业务需求填写需要启用的白名单等等,一般展示位置不填也没影响
• 

其次,在项目中的public文件下的index.html引入

<script src="https://map.qq.com/api/gljs?v=1.exp&key=申请的key"></script>

最后, 在页面中使用

<template>
        <div id="map"></div>
</template>

<script>
export default {
	mounted() {
		 this.$nextTick(() => {
	       this.initMap();
	     });
	},
	methods: {
		initMap() {
		  // 定义地图中心点坐标
		  const center = new window.TMap.LatLng(37.464594, 121.447867);
		  // 定义map变量，调用 TMap.Map() 构造函数创建地图
		  const map = new window.TMap.Map(document.getElementById('map'), {
		      center: center, // 设置地图中心点坐标
		      zoom: 15, // 设置地图缩放级别
		      pitch: 20, // 设置俯仰角
		      rotation: 0 // 设置地图旋转角度
		  });
		  new window.TMap.MultiMarker({
		      map: map,
		      //点标记数据数组
		      geometries: [
		          {
		              id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
		              styleId: 'myStyle', //指定样式id
		              position: new window.TMap.LatLng(37.464594, 121.447867), //点标记坐标位置
		              properties: {
		                  //自定义属性
		                  title: '烟台'
		              }
		          }
		      ]
		  });
	  }
}
</script>

注意

• 直接再mounted初始化地图会报错,地图未渲染
  

• 放在 $nextTick 中正常执行渲染
  

留个坑

• v2里腾讯地图的TMap为什么会挂载到window上?