VUE 引用腾讯地图

效果图（样式丑）：

1、在index.html中引入腾讯地图包：

<script src="https://map.qq.com/api/gljs?v=1.exp&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU"></script>

腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage；

2、组件代码

<template>
	<div class="map">
		<div>
			<el-form :inline="true">
				<el-form-item label="详细地址:">
					<el-input v-model="body.keyword" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type='primary' @click='search'>搜索</el-button>
				</el-form-item>
			</el-form>
			<div ref='mapView'></div>
		</div>
		<div class="addrs">
			<div class="addr-item" v-for="item in address" @click.stop="select_item(item)">
				<p> {{ item.title }}</p>
				<p>{{ item.tel }}</p>
			</div>
		</div>
	</div>
</template>
<script>
	import { getLatLng } from "../../../apis/store.js"
	export default {
		props: ['mapAddr'],
		data() {
			return {
				marker: null,
				map: null,
				body: {
					keyword: '',
					page_size: 10,
					page_index: 1
				},
				address: []
			}
		},
		mounted() {
			this.body.keyword = this.mapAddr;
			this.search();
		},
		methods: {
			initMap(lat = 23.086966, lng = 113.366729) {
				let center = new window.TMap.LatLng(lat, lng)
				let container = this.$refs.mapView;
				container.innerHTML = '';
				this.map = new window.TMap.Map(container, {
					center: center, // 设置地图中心点坐标
					zoom: 17.2, // 设置地图缩放级别
					pitch: 43.5, // 设置俯仰角
					rotation: 45 // 设置地图旋转角度
				})
				this.map.on("click", this.getPoint);
				this.createMarker(lat, lng);
			},
			getPoint(evt) {
				var lat = Number(evt.latLng.getLat().toFixed(6));
				var lng = Number(evt.latLng.getLng().toFixed(6));
				this.createMarker({ lat, lng })
			},
			createMarker(lat, lng) {
				this.removeMarker();
				if (!this.marker) {
					this.marker = new window.TMap.MultiMarker({
						id: 'marker-layer',
						map: this.map,
						styles: {
							"marker": new window.TMap.MarkerStyle({
								"width": 25,
								"height": 35,
								"anchor": { x: 16, y: 32 },
								"src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png"
							})
						},
						geometries: [{
							"id": 'demo',
							"styleId": 'marker',
							"position": new window.TMap.LatLng(lat, lng),
							"properties": {
								"title": "marker"
							}
						}]
					});
				}
			},
			//移除marker事件
			removeMarker() {
				if (this.marker) {
					this.marker.setMap(null);
					this.marker = null;
				}
			},
			search() {
				getLatLng(this.body).then(resp => {
					if (resp.code === 200) {
						this.address = resp.data;
						if (this.address.length > 0) {
							let obj = this.address[0].location;
							this.initMap(obj.lat, obj.lng)
						}
					}
				})
			},
			select_item(item) {
				this.$emit("save", item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/variables.scss";

	.map {
		position: relative;
		text-align: left;
		margin-left: -24px;
		margin-top: -24px;

		.el-form {
			padding-top: 15px;
			padding-left: 224px;

			.el-input {
				width: 300px;
			}
		}

		.addrs {
			z-index: 9999;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #d7d7d7;
			width: 200px;
			height: 100%;
			overflow-y: scroll;

			.addr-item {
				padding: 4px;
				border-radius: 2px;
				background-color: #fff;
				margin: 4px;
			}
		}
	}
</style>

3、服务端处理跨越接口（可以用JSONP方式回调函数）：

https://apis.map.qq.com/ws/place/v1/search?boundary=region(全国,0)&keyword=中国广东省广州市海珠区方圆大征场&page_size=20&page_index=1&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU

 

 腾讯返回的数据：

 腾讯接口文档：

WebService API | 腾讯位置服务