自封装｜地图组件，基于腾讯地图Api开发。支持地址选点，地址搜索，双向解析，轨迹播放（个人学习记录）

在index.html文件中导入腾讯地图的组件apiscript srchttps://map.qq.com/api/gljs?v1.expkey输入你的KEY/script创建文件components/map/index.vuetemplate div styleposition: relative; div v-if!mapLoaded classloadingPage div classloading loader / /div !-- 控制台 -- div v-ifsearchShow mapLoaded classcontrol el-autocomplete v-modelsearchAddress classinline-input :fetch-suggestionsquerySearch placeholder请输入市区名地名 clearable :trigger-on-focusfalse inputinputAddress selectsearch click.native.stop / el-button :disabledisDisabled click.stopsearch 搜索地址/el-button /div div v-ifmapType route mapLoaded classcontrol div classitem div classlabel播放速度:/div el-input-number v-modelspeedNum :min1 :max999 label播放速度 changespeedChange / el-button stylemargin-left: 20px; click.stopspeedChange(10) 10倍速/el-button el-button click.stopspeedChange(100)100倍速/el-button el-button click.stopspeedChange(999)1000倍速/el-button /div /div !-- 地图容器 -- div idqqmap :stylewidth: width ;height: height ; / /div /template script import { addressResolution, addressInverseResolution, keywordAssociation } from ./mapApi export default { props: { width: { type: String, default: 100% }, height: { type: String, default: 100% }, // 启用点击事件 clickEvent: { type: Boolean, default: false }, // 启用搜索功能 searchShow: { type: Boolean, default: false } }, data() { return { mapType: null, mapLoaded: false, // 地图是否加载完成 map: null, // 地图对象实例 center: null, // 地图中心点 maker: null, // 标记点实例 markGeo: [], // 点标记列表 polylineLayer: null, path: [], // 初始化地图数据 location: { lng: undefined, // 经度 lat: undefined // 纬度 }, // 轨迹开始坐标 startLocation: { lng: undefined, // 经度 lat: undefined // 纬度 }, // 轨迹结束坐标 endLocation: { lng: undefined, // 经度 lat: undefined // 纬度 }, searchAddress: , // 地址搜索数据 searchList: undefined, // 地址搜索结果 isDisabled: true, // 搜索按钮是否禁用 province: undefined, // 省 city: undefined, // 市 district: undefined, // 区 addressValue: undefined, // 详细地址 speedNum: 1 } }, created() { }, methods: { launch(res, type) { if (type point) { this.mapType point this.getLocation(res) // 初始化经纬度 } else if (type route) { this.mapType route this.getLocationRoute(res) // 初始化经纬度 } if (!this.mapLoaded) { this.initMap() // 初始化地图 } }, devastate() { this.speedNum 1 this.map.destroy() this.mapLoaded false }, // 地图初始化 initMap() { // 定义地图中心点坐标 this.center new window.TMap.LatLng( this.location.lat, this.location.lng ) // 定义map变量调用 TMap.Map() 构造函数创建地图 this.map new window.TMap.Map(document.getElementById(qqmap), { center: this.center, // 设置地图中心点坐标 zoom: 17.2, // 设置地图缩放级别 pitch: 43.5, // 设置俯仰角 rotation: 45, // 设置地图旋转角度 viewMode: 3D // 设置地图展示形式 默认3D }) if (this.$props.clickEvent) { this.map.on(click, this.clickHandler) // 添加地图点击事件 } // 创建点标记 if (this.mapType point) { this.markGeo [ { id: 1, // 点标记唯一标识后续如果有删除、修改位置等操作都需要此id styleId: myStyle, // 指定样式id position: new window.TMap.LatLng( this.location.lat, this.location.lng ) } ] } else if (this.mapType route) { this.markGeo [ { id: car, styleId: car-down, position: new window.TMap.LatLng( this.location.lat, this.location.lng ) }, { id: start, styleId: start, position: new TMap.LatLng( this.startLocation.lat, this.startLocation.lng ) }, { id: end, styleId: end, position: new TMap.LatLng( this.endLocation.lat, this.endLocation.lng ) } ] } this.maker new window.TMap.MultiMarker({ map: this.map, // 绑定地图对象 styles: { car-down: new TMap.MarkerStyle({ width: 40, height: 40, anchor: { x: 20, y: 20 }, faceTo: map, rotate: 0, src: https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png }), start: new TMap.MarkerStyle({ width: 25, height: 35, anchor: { x: 16, y: 32 }, src: https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png }), end: new TMap.MarkerStyle({ width: 25, height: 35, anchor: { x: 16, y: 32 }, src: https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png }) }, geometries: this.markGeo // 点标记数据 }) // 添加路线轨迹 if (this.mapType route) { this.polylineLayer new TMap.MultiPolyline({ map: this.map, // 绘制到目标地图 // 折线样式定义 styles: { style_route: new TMap.PolylineStyle({ color: #3777FF, // 线填充色 width: 5, // 折线宽度 borderWidth: 1, // 边线宽度 borderColor: #eee, // 边线颜色 lineCap: round // 线端头方式 }) }, geometries: [{ styleId: style_route, paths: this.path }] }) this.maker.moveAlong({ car: { path: this.path, speed: 888 * this.speedNum } }, { autoRotation: true }) } this.mapLoaded true console.log(地图加载完成) }, // 单点地图数据初始化 getLocation(res) { this.location.lng res.longitudeX this.location.lat res.latitubeY if (this.mapLoaded) { // 设置标记点 this.setMaker(this.location.lat, this.location.lng) // 移动地图中心点 this.map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng)) } }, // 地图点击事件 clickHandler(evt) { this.location.lat evt.latLng.getLat().toFixed(6) // 获取纬度 this.location.lng evt.latLng.getLng().toFixed(6) // 获取经度 // 设置标记点 this.setMaker(this.location.lat, this.location.lng) // 地址逆解析 addressInverseResolution(this.location.lat , this.location.lng).then(res { this.addressValue res.result.address this.province res.result.address_component.province this.city res.result.address_component.city this.district res.result.address_component.district // 传递地址数据 this.postAddressData() }) }, // 设置标记点 setMaker(latitude, longitude) { // 修改标记点 this.maker.updateGeometries({ id: 1, // 点标记唯一标识后续如果有删除、修改位置等操作都需要此id styleId: myStyle, // 指定样式id position: new window.TMap.LatLng( latitude, longitude ) }) }, // 搜索地址 search() { // 地址解析 addressResolution(this.searchAddress).then(res { const searchOption this.searchList.find(f f.result.title this.searchAddress) if (res.message ! Success) { if (searchOption searchOption.result.title ! this.searchAddress) { this.$message({ message: 请注意搜索格式是否正确, type: error, duration: 2000, offset: 70 }) return } else if (searchOption searchOption.result.title) { res searchOption } } // 设置标记点 this.setMaker(res.result.location.lat, res.result.location.lng) // 移动地图中心点 this.map.setCenter(new TMap.LatLng(res.result.location.lat, res.result.location.lng)) // 获取详细地址信息 this.addressValue res.result.title this.province res.result.address_components.province this.city res.result.address_components.city this.district res.result.address_components.district // 传递地址数据 this.postAddressData() }) }, // 查询联想词 querySearch(queryString, cb) { keywordAssociation(queryString).then(({ data }) { for (var i 0; i data.length; i) { data[i].value data[i].title } this.searchList data.map(m { const location m.location const title m.title const province m.province const district m.district const city m.city const address_components { province, district, city } const searchOption { result: { title, location, address_components }} return searchOption }) cb(data) }) }, // 判断输入地址是否为空 inputAddress(value) { if (value) { this.isDisabled false } else { this.isDisabled true } }, // 传递地址数据 postAddressData() { // this.$emit(postAddress, { // province: this.province, // city: this.city, // district: this.district, // addressValue: this.addressValue, // latitubeY: this.location.lat, // longitudeX: this.location.lng // }) }, // 路径地图数据初始化 getLocationRoute(res) { // 获取起点坐标信息 this.startLocation.lng res[0].longitudeX this.startLocation.lat res[0].latitudeY // 获取终点坐标信息 this.endLocation.lng res[res.length - 1].longitudeX this.endLocation.lat res[res.length - 1].latitudeY const LastPosition res[0]// 最新的坐标信息 this.location.lng LastPosition.longitudeX this.location.lat LastPosition.latitudeY console.log(this.endLocation); console.log(this.startLocation); res.forEach(item { this.path.push(new TMap.LatLng(item.latitudeY, item.longitudeX)) }) if (this.mapLoaded) { // 移动地图中心点 this.map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng)) } }, speedChange(num) { if (num) { this.speedNum num } this.maker.moveAlong({ car: { path: this.path, speed: 800 * this.speedNum } }, { autoRotation: true }) } } } /script style langscss scoped .control { position: absolute; top: 10px; left: 10px; z-index: 1999; .item { display: flex; align-items: center; .label { font-size: 16px; color: #666; margin-right: 10px; } } } .loadingPage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3999; .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { width: 48px; height: 48px; border: 5px solid #00afee; border-bottom-color: #90cf5b; border-radius: 50%; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; } /style创建文件components/map/map_api.js// 地址解析 export function addressResolution(address) { return new Promise(function(resolve, reject) { window.handleResponse function(data) { resolve(data) } const url https://apis.map.qq.com/ws/geocoder/v1/?address address key输入你的KEYoutputjsonpcallbackhandleResponse var script document.createElement(script) script.src url document.body.appendChild(script) }) } // 地址逆解析 export function addressInverseResolution(location) { return new Promise(function(resolve, reject) { window.handleResponse function(data) { resolve(data) } const url https://apis.map.qq.com/ws/geocoder/v1/?location location key输入你的KEYoutputjsonpcallbackhandleResponse var script document.createElement(script) script.src url document.body.appendChild(script) }) } // 关键词联想 export function keywordAssociation(keyword) { return new Promise(function(resolve, reject) { window.handleResponse function(data) { resolve(data) } const url https://apis.map.qq.com/ws/place/v1/suggestion?keyword keyword key输入你的KEYoutputjsonpcallbackhandleResponsepolicy1 var script document.createElement(script) script.src url document.body.appendChild(script) }) }调用方式template div el-button typeprimary clickhandleOpen打开地图/el-button el-button typeprimary clickhandlePlay播放轨迹/el-button el-drawer :visible.syncdrawerShow directionbtt :before-closehandleClose wrapperClosable size800px :with-headerfalse TXmap refTXmapRef :height797px :clickEventtrue :searchShowtrue / /el-drawer /div /template script // 引入地图组件 import TXmap from /components/TXmap; export default { components: { TXmap, }, data() { return { // 是否显示弹出层 drawerShow: false, }; }, methods: { async handleOpen() { // 打开弹窗 this.drawerShow true; // 加载地图数据 const data { longitudeX: 116.397477, latitubeY: 39.908692, }; this.$nextTick(() { this.$refs.TXmapRef.launch(data, point); //加载地图数据 单点标记 }); }, handlePlay() { // 打开弹窗 this.drawerShow true; // 加载地图数据 const data [ {longitudeX:116.30571126937866,latitudeY:39.98481500648338}, {longitudeX:116.30596876144409,latitudeY:39.982266575222155}, {longitudeX:116.3111400604248,latitudeY:39.982348784165886}, {longitudeX:116.3111400604248,latitudeY:39.978813710266024}, {longitudeX:116.31699800491333,latitudeY:39.978813710266024}, ]; this.$nextTick(() { this.$refs.TXmapRef.launch(data, route); //加载地图数据 播放轨迹 }); }, handleClose() { // 关闭弹窗 this.drawerShow false; this.$refs.TXmapRef.devastate(); //销毁地图 }, }, }; /script