vue2.0引入腾讯地图

柔光的暖阳◎ 2022-01-31 11:43 717阅读 0赞

百度很多东西，然后我没找到腾讯地图在VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。

首先在src里面建立了TMap.js的文件，内容如下：

export function TMap(key) {
              return new Promise(function (resolve, reject) {
                   window.init = function () {
                  resolve(qq)//注意这里
             }
            var 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);
          })
        }

然后，直接使用部分代码，我在map.vue里面使用代码如下：

<template>
        <div id="container">
        </div>
    </template>
    <script>
    import { TMap } from '../TMap'
    export default {
        data() {
            return {
            }
        },
        mounted() {
            TMap('申请的key').then(qq => {
                var map = new qq.maps.Map(document.getElementById("container"), {
                    // 地图的中心地理坐标。
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                     zoom: 8
                });
            });
        },
        methods: {
        },
        created: function () {
        }
    }
    </script>
    <style>
    #container {
        min-width:600px;
        min-height:767px;
    }
    </style>

最后，出效果了如下：

![214528-20170710105144837-990277575.png][]

原文：[https://www.cnblogs.com/mrer/p/7144705.html][https_www.cnblogs.com_mrer_p_7144705.html]

[214528-20170710105144837-990277575.png]: /images/20220131/ffb2e9be12ce4a60be18a6354316a074.png
[https_www.cnblogs.com_mrer_p_7144705.html]: https://www.cnblogs.com/mrer/p/7144705.html