Vue集成腾讯地图和几何库

关于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;
            });