VUE做百度地图信息弹窗,并在信息弹窗内容获取html的点击事件

公司项目是使用的vue做的,里面要做百度地图,刚刚开始使用的离线地图,由于很多限制原因造成离线地图效果总是不尽人意,最大的原因就是想要使用百度的API(例如:点击弹出信息窗口,轨迹,路书),这些都需要离线的JS文件支持,一直没有找到,找到的也是错的,最终决定换!直接换在线的!


(PS:主要就是讲一下怎么在VUE中获取到地图信息弹窗中的内容点击事件,如果有在做地图时的其他疑问也可以问我,咱们交流一下兴许你就思路大开了~)
上代码:

我是通过百度地图API中富文本窗口自己改的,调用了InfoBox这个方法,填充一个HTML进去即可

 contents = ["<div class='infoBoxContent'><div><label>设备名称:</label><span οnclick='lookDetail()'>背包箱</span></div>" + "<div><label>设备编号:</label><span>" + smartBox.uniqueCode + "</span></div>" + "<div><label>设备状态:</label><span>离线</span></div></div>"];

定义个点击事件onclick='lookDetail()',在vue中想要触发这个点击事件要挂到window上,所以在created中写上:

created(){
	 window.lookDetail = this.lookDetail;
},

这里调用测试:

lookDetail(val){
      console.log("进入测试...")
    }

在这里插入图片描述
在这里插入图片描述
以上在测试处写自己的业务即可

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用百度地图信息,你可以按照以下步骤进行操作: 1. 首先,确保你已经引入了百度地图的JavaScript API,并获取了API密钥。 2. 在Vue组件中,可以使用一个单独的div元素作为信息的容器。在该组件的模板中添加这个div元素,用于展示地图信息内容。 3. 在Vue组件的方法中,创建一个函数来显示地图信息。你可以使用百度地图的API来实现这个功能。例如,你可以使用`new BMap.InfoWindow(content, opts)`来创建一个信息对象,并使用`map.openInfoWindow(infoWindow, point)`来将添加到地图上的指定位置。 以下是一个简单的示例代码: ```vue <template> <div> <!-- 地图容器 --> <div id="map"></div> </div> </template> <script> export default { mounted() { // 在组件挂载后初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图实例 const map = new BMap.Map("map"); // 设置地图中心点和缩放级别 const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 添加标注 const marker = new BMap.Marker(point); map.addOverlay(marker); // 添加点事件,显示信息 marker.addEventListener("click", () => { this.showInfoWindow(map, marker); }); }, showInfoWindow(map, marker) { // 信息内容 const content = "这里是信息内容"; // 创建信息对象 const infoWindow = new BMap.InfoWindow(content); // 打开信息 map.openInfoWindow(infoWindow, marker.getPosition()); } } }; </script> <style> #map { width: 100%; height: 400px; } </style> ``` 在上面的示例代码中,我们在Vue组件的模板中添加了一个id为"map"的div元素,作为地图的容器。在mounted钩子函数中,调用了initMap方法来初始化地图。在initMap方法中,我们创建了一个地图实例,并设置了地图的中心点和缩放级别,然后添加了一个标注,并为标注添加了点事件。点标注时,会调用showInfoWindow方法来显示信息。 showInfoWindow方法中,我们创建了一个信息对象,并使用map.openInfoWindow方法将添加到地图上的标注位置。 这样,当用户点地图上的标注时,就会显示出信息,并展示出相应的内容。 希望对你有所帮助!如果有任何疑问,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值