当前位置 博文首页 > ddd295569371的博客:VUE做百度地图信息弹窗,并在信息弹窗内容

    ddd295569371的博客:VUE做百度地图信息弹窗,并在信息弹窗内容

    作者:[db:作者] 时间:2021-06-15 18:13

    公司项目是使用的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("进入测试...")
        }
    

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