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>
复制代码

最后,出效果了如下:

 

posted @   二先生  阅读(15696)  评论(3编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示