一、腾讯地图key申请
附上教程：腾讯地图key申请
二、在项目加载JS API
在VUE项目的pubilc文件夹下的index.html中加入
<script src="/api/gljs?v=1.exp&key=你申请的key"></script>
三、组件封装
1、在src>components文件夹下新建MyMap.vue
2、代码如下：
<template><div><div class="c-tmap-select"><a-selectv-model="provinceValue"placeholder="省"class="c-amap_select"><a-select-optionv-for="item in provinceOptions":key="item.id":value="item.fullname"@click="provinceChange(item)">{{item.fullname }}</a-select-option></a-select><a-selectv-model="cityValue"placeholder="市"class="c-amap_select"><a-select-optionv-for="item in cityOptions":key="item.id":value="item.fullname"@click="cityChange(item)">{{item.fullname }}</a-select-option></a-select><a-selectv-model="areaValue"placeholder="区"class="c-amap_select"><a-select-optionv-for="item in areaOptions":key="item.id":value="item.fullname"@click="areaChange(item)">{{item.fullname }}</a-select-option></a-select></div><slot></slot><div id="container" style="width:800px;height:400px;"><divclass="c-tmap-input"@click.stop="()=>{}"@touch.stop="()=>{}"@dblclick.stop="()=>{}"><a-auto-completev-model="address"date-source="dataSource"placeholder="请输入详细地址"class="c-tmap-input_auto"@change="handleChange"><template slot="dataSource"><a-select-optionv-for="item in dataSource":key="item.id":title="item.title"@click="selctLocation(item)">{{item.title }}--{{item.address }}</a-select-option></template></a-auto-complete></div></div></div></template><script>export default {name: 'MyMap',props: {// 省provinceProp: {type: String,default: ''},// 市cityProp: {type: String,default: ''},// 区areaProp: {type: String,default: ''},// 经度longitude: {type: String,default: ''},// 纬度latitude: {type: String,default: ''}},data() {return {markerLayer: {},map: {},lng: 116.40717, // 经度lat: 39.90469, // 纬度,address: '', // 详细地址dataSource: [], // 详细地址输入提示provinceValue: '', // 省cityValue: '', // 市areaValue: '', // 区provinceOptions: [], // 省级行政区选择cityOptions: [], // 市级行政区选择areaOptions: [], // 县区行政区选择provinces: [], // 省级数据cities: [], // 市级数据areas: [] // 地区数据}},async mounted() {this.init()this.markerLayer = new window.TMap.MultiMarker({})this.initMap()this.addImgMarker(new window.TMap.LatLng(this.lat, this.lng))await this.getDistrict()},methods: {// 省市区数据初始化init() {if (this.provinceProp) {this.provinceValue = this.provinceProp}if (this.cityProp) {this.cityValue = this.cityProp}if (this.areaProp) {this.areaValue = this.areaProp}},// 重置市、区、详细地址数据resetCityAndareaData() {this.cityValue = ''this.areaValue = ''this.address = ''this.cityOptions = []this.areaOptions = []},// 重置区、详细地址数据resetareaData() {this.areaValue = ''this.address = ''this.areaOptions = []},// 选择省级地区触发provinceChange(item) {this.resetCityAndareaData()// console.log(item.cidx)if (item && item.cidx) {this.cityOptions = this.cities.slice(item.cidx[0], item.cidx[1] + 1)this.getLocation(item.location)}this.provinceValue = item.fullnamethis.chooseData()// console.log(item.cidx[0], item.cidx[1] + 1)},// 选择城市触发cityChange(item) {this.resetareaData()// console.log(item)if (item && item.cidx) {this.areaOptions = this.areas.slice(item.cidx[0], item.cidx[1] + 1)this.getLocation(item.location)}this.cityValue = item.fullname// console.log(item.cidx[0], item.cidx[1] + 1)// console.log(this.areaOptions)this.chooseData()},// 选择地区触发areaChange(item) {this.areaValue = item.fullnamethis.chooseData()if (item) {this.getLocation(item.location)}},chooseData() {// console.log(this.provinceValue, this.cityValue, this.areaValue, this.address)const data = {provinceValue: this.provinceValue,cityValue: this.cityValue,areaValue: this.areaValue,address: this.address}this.$emit('change', data)},// 获取全部行政区划数据getDistrict() {this.$store.dispatch('map/getDistrict').then(res => {this.district = res.resultthis.provinces = res.result[0]this.provinceOptions = res.result[0]this.cities = res.result[1]this.areas = res.result[2]// console.log(this.district)})},selctLocation(item) {// console.log(item)this.getLocation(item.location)this.address = item.title + '-' + item.addressthis.chooseData()},// 获取当前位置，并在地图中显示getLocation(location) {// console.log('location', location)this.lat = location.latthis.lng = location.lngthis.map.setCenter(new window.TMap.LatLng(this.lat, this.lng))this.addImgMarker(new window.TMap.LatLng(this.lat, this.lng))},// 选择搜索handleChange() {const that = thisthis.$store.dispatch('map/getSuggestion', {region: this.cityValue || '',keyword: this.address,}).then(res => {that.dataSource = res.data})},// 地图初始化initMap() {// console.log('window', window)const that = this// 定义地图中心点坐标// eslint-disable-next-line no-undefconst center = new TMap.LatLng(this.lat, this.lng)// 定义map变量，调用 TMap.Map() 构造函数创建地图// eslint-disable-next-line no-undefconst map = new TMap.Map(document.getElementById('container'), {center: center, // 设置地图中心点坐标zoom: 15, // 设置地图缩放级别pitch: 43.5, // 设置俯仰角rotation: 45, // 设置地图旋转角度})this.map = mapmap.on('click', (e) => {this.markerLayer.setGeometries([])const position = e.latLng// console.log(e)// console.log(position.lat.toFixed(6))this.$store.dispatch('map/getClickLocation', {lat: position.lat.toFixed(6),lng: position.lng.toFixed(6)}).then(res => {// console.log(res)that.provinceValue = res.result.address_component.provincethat.cityValue = res.result.address_component.citythat.areaValue = res.result.address_component.districtthat.address = res.result.formatted_addresses.recommendthat.chooseData()})that.addImgMarker(position)})},// 在地图上添加点标识addImgMarker(data) {// console.log(data, 'data')this.markerLayer = new window.TMap.MultiMarker({map: this.map,// 样式定义styles: {// 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）myStyle: new window.TMap.MarkerStyle({width: 25, // 点标记样式宽度（像素）height: 35, // 点标记样式高度（像素）anchor: {x: 16, y: 32 },}),},// 点标记数据数组geometries: [{id: '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此idstyleId: 'myStyle', // 指定样式idposition: data, // 点标记坐标位置},],})},},}</script><style lang="scss">.c-tmap-select {margin: 10px;}.c-tmap-input {position: absolute;z-index: 9999;top: 10px;right: 85px;}.c-tmap-input_auto {width: 300px;}</style>
