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

一、在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));
                        })
                    }
                });
            },
}
复制代码

 

 
复制代码

三、效果如下

 

posted @   王大师  阅读(9459)  评论(3编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示