vue 中使用騰訊地圖（動態引用騰訊地圖及使用簽名驗證）

在這里插入圖片描述

在設置定位的時候使用騰訊地圖選擇地址
在 mounted中引入騰訊地圖：
this.website.mapKey 為地圖的 key

// 異步加載騰訊地圖APIconst script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://map.qq.com/api/js?v=2.exp&key='+this.website.mapKey+'&callback=init';document.body.appendChild(script);// 回調函數，初始化地圖window.init = () => {this.initMap();this.$nextTick(()=>{if(this.map){//   // 監聽中心點變化事件，更新marker的位置this.listener=qq.maps.event.addListener(this.map, 'dragend', ()=>this.centerChanged());}})};

在 destroyed 卸載

 destroyed(){let scripts = document.querySelectorAll('script');// 遍歷所有找到的<script>元素并移除它們scripts.forEach((script)=> {let src=script.getAttribute('src');if(src&&src.indexOf('qq')>=0){script.parentNode.removeChild(script);}});qq.maps.event.removeListener(this.listener)},

彈框組件代碼為：

<template><el-dialog title="設置定位":visible.sync="dialogVisible"width="900px":before-close="handleClose":modal-append-to-body="true":append-to-body="true":close-on-click-modal="false"v-dialogdragclass="common-dialog"><div class="clearfix"><div class="pull-left near-box"><el-input v-model="keyword" @change="changeKeyword"><el-button slot="append" icon="el-icon-search" @click="searchNear"></el-button></el-input><ul class="location-list"><li v-for="(item,index) in nearList" :key="index" :class="selectedIndex==index?'location-active':''"><div @click="handleSelect(item,index)"><div class="location-title">{{item.title}}</div><span class="location-address">{{item.address}}</span></div></li></ul></div><div class="pull-right map-box"><div id="container"></div></div></div><span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="submitAction">確 定</el-button></span></el-dialog>
</template>
<script>import {mapGetters} from "vuex";import {getAddressByLat,searchByKeyword} from '@/api/address'export default {props:{form:{type: Object}},data(){return {selectedIndex:'',keyword: '山東省青島市',dialogVisible : true,mapZoom: 15,pitch: 0,addressInfo: this.form,mapCenter: {adcode: 370203,city: "青島市",district: "市北區",ip: "111.17.222.181",lat: 36.08743,lng: 120.37479,nation: "中國",province: "山東省"},nearList:[],map:null,//地圖markerLayer:null,listener:null}},mounted(){if(this.form.lat&&this.form.lng){this.mapCenter={...this.form,city:this.form.cityName};this.keyword=this.form.provinceName+this.form.cityName+this.form.areaName+this.form.address.substring(0,64)} else if(this.location.lat){this.mapCenter = {...this.location};if(this.location.province&&this.location.city){this.keyword=(this.location.province+this.location.city).substring(0,64)}}// 異步加載騰訊地圖APIconst script = document.createElement('script');script.type = 'text/javascript';script.id = 'qqMap';script.name = 'qqMap';script.src = 'https://map.qq.com/api/js?v=2.exp&key='+this.website.mapKey+'&callback=init';document.body.appendChild(script);// 回調函數，初始化地圖window.init = () => {this.initMap();this.$nextTick(()=>{if(this.map){//   // 監聽中心點變化事件，更新marker的位置this.listener=qq.maps.event.addListener(this.map, 'dragend', ()=>this.centerChanged());}})};},destroyed(){let scripts = document.querySelectorAll('script');// 遍歷所有找到的<script>元素并移除它們scripts.forEach((script)=> {let src=script.getAttribute('src');if(src&&src.indexOf('qq')>=0){script.parentNode.removeChild(script);}});qq.maps.event.removeListener(this.listener)},computed: {...mapGetters(["location"]),},methods:{//初始化地圖initMap(){let element=document.getElementById('container');//定義地圖中心點坐標let center=new qq.maps.LatLng(this.mapCenter.lat,this.mapCenter.lng);//定義map變量，調用 TMap.Map() 構造函數創建地圖this.map = new qq.maps.Map(element, {pitch: this.pitch,center: center,//設置地圖中心點坐標zoom:this.mapZoom,   //設置地圖縮放級別});// 創建一個位于地圖中心點的markerthis.markerLayer = new qq.maps.Marker({map: this.map,position: center});if(this.keyword){this.getAddressByKeyword( this.mapCenter)}},centerChanged(){this.mapCenter=this.map.getCenter();this.getLocationByLat()},//當前選擇handleSelect(item,index){this.selectedIndex=index;this.mapCenter={...item,lat:item.location.lat,lng:item.location.lng,};this.map.setCenter(new qq.maps.LatLng(item.location.lat,item.location.lng));this.markerLayer.setPosition(new qq.maps.LatLng(item.location.lat,item.location.lng))// this.getLocationByLat()},changeKeyword(val){this.keyword=val;},searchNear(){this.mapCenter={};this.getAddressByKeyword()},getLocationByLat(){getAddressByLat({location:`${this.mapCenter.lat},${this.mapCenter.lng}`,key:this.website.mapKey,}).then(res=>{this.keyword=res.result.address;this.getAddressByKeyword(res.result)})},//根據關鍵字查找地址列表//https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestiongetAddressByKeyword(latInfo){let params={keyword:this.keyword,region:this.mapCenter.city?this.mapCenter.city:'',policy:1,page_size:20,page_index:1,address_format:'short',key:this.website.mapKey,};if(this.mapCenter.lat&&this.mapCenter.lat!=-1&&this.mapCenter.lng&&this.mapCenter.lng!=-1){params.location=`${this.mapCenter.lat},${this.mapCenter.lng}`}searchByKeyword(params).then(res=>{this.nearList=res.data;let first=res.data&&res.data[0]?res.data[0]:'';if(first){this.selectedIndex=0;if(!params.location){let lat=first.location.lat;let lng=first.location.lng;this.mapCenter={...first,lat:lat,lng:lng};this.map.setCenter(new qq.maps.LatLng(lat,lng))}} else if(latInfo){let obj={...latInfo.ad_info,...latInfo.location,address:latInfo.address,title:latInfo.formatted_addresses&&latInfo.formatted_addresses.recommend?latInfo.formatted_addresses.recommend:latInfo.address};this.mapCenter=obj;this.nearList=[obj];this.map.setCenter(new qq.maps.LatLng(this.mapCenter.lat,this.mapCenter.lng))}this.markerLayer.setPosition(new qq.maps.LatLng(this.mapCenter.lat,this.mapCenter.lng))})},handleClose(){this.dialogVisible=false;this.$emit('closeDialog',false)},submitAction(){if(!this.keyword){this.$message.error('請輸入關鍵字查詢/或拖動地圖查找');return false}this.$emit('changeMapLocation', this.selectedIndex>=0&&this.nearList[this.selectedIndex]?this.nearList[this.selectedIndex]:this.mapCenter);this.handleClose()}}}
</script>
<style lang="scss" scoped>@import "@/styles/variables";.common-dialog {/deep/.el-dialog__body{padding:20px 30px;}.el-input__inner{height:36px;line-height: 36px;}}.near-box{width:300px;height:500px;}.map-box{width:calc(100% - 320px);height:500px;margin:0;padding:0}#container{width:100%;height:100%;}/deep/ .el-input{min-width: auto;}.location-list{list-style: none;margin: 10px 0 0;padding:0;max-height: 460px;border:1px solid $color-border-light;overflow-y: auto;}.location-list li{list-style: none;padding:5px;border-bottom:1px solid $color-border-light;cursor: pointer;&:last-child{border-bottom: none;}}.location-list li.location-active{background-color: $color-primary;.location-title,.location-address{color:#fff;}}.location-title{font-size: 14px;color:$color-text-dark;font-weight: bold;}.location-address{font-size: 12px;color: $color-text-secondary;transform: scale(0.85);}
</style>

以逆地址解析為例寫法為：

import request from "@/axios";
//逆地址解析
export const getAddressByLat = (params) =>{return request.jsonp('/ws/geocoder/v1', {output: "jsonp",...params})
}

axios 調用 jsonp 方法

import axios from 'axios';
import {serialize} from '@/util/util';
import {Message} from 'element-ui';
axios.jsonp = function(url,data){if(!url) throw new Error('接口地址錯誤')function sortObjectByKeys(obj) {return Object.keys(obj).sort().reduce((sortedObj, key) => {sortedObj[key] = obj[key];return sortedObj;}, {});}const callback = 'CALLBACK' + Math.random().toString().substr(9,18)const time=Date.now();let newData=sortObjectByKeys({...data,callback,time});let sign=md5(`${url}?${serialize(newData)}YOUR_SK`);const JSONP = document.createElement('script')JSONP.setAttribute('type','text/javascript')const headEle = document.getElementsByTagName('head')[0];JSONP.src = `https://apis.map.qq.com${url}?${serialize(newData)}&sig=${sign}`;return new Promise( (resolve) => {window[callback] = r => {if(r.status!='0'){Message({message: r.message,type: 'warning'});}resolve(r)headEle.removeChild(JSONP)delete window[callback]}headEle.appendChild(JSONP)})
}
export default axios;