vue中引入腾讯地图，并为多个marker添加事件

最新推荐文章于 2025-05-29 23:54:31 发布

weixin_30673715

最新推荐文章于 2025-05-29 23:54:31 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangdashi/p/9522044.html

本文介绍了一种在Web应用中使用TMap加载并显示腾讯地图的方法。通过创建TMap.js文件并导出一个名为TMap的函数，该函数接收地图密钥作为参数，并返回一个Promise，用于异步加载地图。在Vue组件中调用此函数，可以实现地图的初始化、添加标记及信息窗口等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在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 = "https://map.qq.com/api/js?v=2.exp&callback=init&key="+key;
        script.onerror = reject;
        document.head.appendChild(script);
    })
}

二、引入TMap

TMap('申请的腾讯地图key').then（）

data () {

　　return {

　　　　key: 'IOHBZ-EV2R3-4BU3N-YEQN7-AQMYF-7XFF4'

　　}

mounted () {

　　this._getLocation()

methods:{

　　　　　　　_getLocation(){
                getLocation(this.orgId).then(res=>{
                    let data = res.data.data.librarys
                    this._TMap(data)
                })
            },
            _TMap(data){
                TMap(this.key).then(qq => {
                    var center = new qq.maps.LatLng(39.916527,116.397128);
                    var map = new qq.maps.Map(document.getElementById("container"), {
                        // 地图的中心地理坐标
                        center: center,
                        //初始化地图缩放级别
                        zoom: 5
                    });
                    //添加提示窗
                    var infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    //添加标记
                    for(let i=0;i<data.length;i++){
                        var marker = new qq.maps.Marker({
                           position: new qq.maps.LatLng(data[i].lat,data[i].lng),
                           map: map,
                        })
                        marker.libraryName = data[i].libraryName
                        qq.maps.event.addListener(marker, 'click', function() {
                            infoWin.open();
                            infoWin.setContent('<div style="text-align:center;white-space:'+
                            'nowrap;margin:10px;"> ' + this.libraryName+ ' </div>');
                            //提示窗位置
                            infoWin.setPosition(new qq.maps.LatLng(data[i].lat,data[i].lng));
                        })
                    }
                });
            },
     }