vue2.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>

最后，出效果了如下：

标签: vue, vue2.0, 腾讯地图, vue使用腾讯地图, 地图, 引用腾讯地图

http://www.cnblogs.com/mrer/p/7144705.html

更多精彩分享

• 陆老师 [海军工程大学 硕士 — 嵌入式开发专家] 2024-03-26 11:26:03.003
• 时光飞逝 2024-03-26 11:25:53.823
• 纸上得来终觉浅 2024-03-26 11:25:42.68
• 软件行业发展七大方向 2024-03-26 11:25:34.457
• 如何组建测试团队？ 2024-03-26 11:25:25.33
• 在青岛学习JavaEE哪家学校最好？ 2024-03-26 11:25:16.78
• 教务排课系统 2024-03-26 11:24:56.74
• 青岛帕特智能科技有限公司 2024-03-26 11:24:30.433
• 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26 11:24:15.657
• 感谢，我亲爱的万码学堂 2024-03-26 11:12:06.6

陆老师 [海军工程大学 硕士 — 嵌入式开发专家]