在vue中使用腾讯地图

1. 引入腾讯地图

在 index.html 中插入

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

2. 引入TMap

在 build/webpack.base.conf.js 中 引入 TMap，否则在使用时会报错

 externals: {
    TMap: 'TMap'
 }

3. 创建地图组件

3.1. 在 src/components中新建 tencent-map.vue 文件

3.2. 为地图创建容器

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

3.3. 实例化地图

import TMap from "TMap";
<script>
	data() {
		return {
			nowLat: 39.98412, // 纬度
			nowLng: 116.307484, // 经度
			map: null, // 地图对象
		}
	},
	created() {
		this.mapInit(this.nowLng, this.nowLat, 16)
	},
	methods: {
		/**
     	* 根据传入的值渲染地图及传出经纬度和地名
     	* @param lng 经度
     	* @param lat 纬度
     	* @param zoom 地图缩放级别
     	*/
		mapInit(lng, lat, zoom) {
			let _this = this;
			// 在页面渲染完成后进行地图的实例化
			this.$nextTick(() => {
				_this.map = new TMap.Map(document.getElementById("container"), {
          		// 地图的中心地理坐标。
          		center: new TMap.LatLng(lat, lng),
          		zoom: zoom
        	});
			})
		},
	}
</script>

4. 使用地图组件

<template>
	<div>
		<t-map v-if="isMapShow" ref="tencentMap" @nowLocation="nowLocation"></t-map>
	</div>
</template>
import tMap from "@/components/tencent-map";
<script>
	components: { tMap },
	data() {
		isMapShow: false,
		dataForm: {
			actLng: 0,
			actLat: 0
		}
	},
	activated() {
		this.init();
	},
	methods: {
		init() {
			 this.$nextTick(() => {
				this.isMapShow = true;
			})
		},
		// 接收坐标位置的方法
		nowLocation(obj) {
      		this.$set(this.dataForm, "actLng", obj.lng);
      		this.$set(this.dataForm, "actLat", obj.lat);
    	},
	}
</script>