关于Vue中如何引入腾讯地图,百度搜索中的结果已经非常明确:
/** * 腾讯地图。 * @param key * @returns {Promise<any>} * @constructor */ export function TMap(key) { return new Promise(function (resolve, reject) { window.init = function () { resolve(qq);//注意这里 }; let script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key=" + key; script.onerror = reject; document.head.appendChild(script); }); }
但是有时候我们需要来进行计算,如测量距离,这时候应该引入几何库(自带地图)代替地图:
/** * 引入地图和几何库 * @param key * @returns {Promise<any>} * @constructor */ export function TMapGeometry(key) { return new Promise(function (resolve, reject) { window.init = function () { resolve(qq);//注意这里 }; let script = document.createElement("script"); script.type = "text/javascript"; script.charset = "utf-8"; script.src = "http://map.qq.com/api/js?v=2.exp&libraries=geometry&callback=init&&key=" + key; script.onerror = reject; document.head.appendChild(script); }); }
使用方法如下:
import {TMapGeometry} from "TMap"; TMapGeometry('xxxxxxxxxxxxxxxx').then(qq => { let center = new qq.maps.LatLng(xxx, xxx); let end = new qq.maps.LatLng(xxx, xxxx); let distance = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(center, end) * 10) / 10; });