vue-cli 按需引入腾讯地图的方法一条

目前腾讯地图没做npm包，所以很多人是使用原生js引入到index.html文件，然后每个页面直接调用原生js的方式去写的。

有些人会觉着这样不太好（比如我），没有做到按需引入，

毕竟因为每个页面都用了相同的地图引入。

我这里给出一个优化方案，可以做到按需引入。

借鉴自 vue引入腾讯地图_m0_37930570的博客-CSDN博客

感谢上面这位大佬

步骤：

1.首先，创建一个简单的js文件，只写如下内容

export function qqMap(key) {
    return new Promise(function (resolve, reject) {
        window.init = function () {
            resolve();
        }

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src="http://map.qq.com/api/js?v=2.exp&key="+key;
        script.onerror = reject;
        document.head.appendChild(script);

        var script2 = document.createElement("script");
        script2.type = "text/javascript";
        script2.src="http://map.qq.com/api/gljs?v=2.exp&libraries=service&key="+key;
        script2.onerror = reject;
        document.head.appendChild(script2);
    })
}

2.在自己的页面中引入对象

<template>
    <div id="container"></div>
</template>

<script>
    import {
        myMap
    } from '../tencertMap.js'
    export default {
        data() {
            return {
                TMap : null
            }
        },
        mounted() {
            this.InitMap();
        },
        methods: {
            var that = this;
            InitMap() {
                myMap('这里填你申请的腾讯地图的key').then(qqMap => {
                    
                    var map = new window.TMap.Map("container", {
                        pitch: 45,
                        zoom: 12,
                        center: new window.TMap.LatLng(39.984104, 116.307503)
                    });
                    //其实这里的目的是，先通过引入将js注入到header中，然后直接操作注入进来的window对象中的腾讯地图对象，我这里示范是将javascript api gl和webservice api同时注入了，所以window.qq.maps对象和window.TMap对象都可以用来操作腾讯地图对象
                })
            }
        }
    }
</script>