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)); }) } }); },
}
三、效果如下
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!