高德地图实现-自定义信息窗+窗体点击事件

高德地图自定义信息窗：打造个性化地图展示

1. 什么是自定义信息窗

自定义信息窗是一种在地图上点击标记点后弹出的窗口，用于显示与该标记点相关的更多信息。与默认信息窗相比，自定义信息窗可以根据开发者的需要定制外观、内容和交互，从而更好地满足应用的要求。

2自定义信息窗的实现步骤

2.1 创建信息窗内容

通过HTML和CSS，您可以定义信息窗的内容和样式。您可以在信息窗中添加文本、图片、链接等元素，以展示相关信息。

  
${point.title}
  
${point.description}
  

2.2 添加信息窗交互 窗体点击事件

利用JavaScript，您可以为信息窗添加交互行为，例如点击事件。当用户点击标记点时，信息窗将显示并展示定制的内容。

这里的content可以写一个方法把参数传递进去并返回html 后面有完整代码可以参考

marker.on("click", function(e) {
// 在这里可以执行相应的操作，例如添加标记或弹出信息窗
  var infoWindow = new AMap.InfoWindow({
    content: createPopupContent(point),
    offset: new AMap.Pixel(0, -30),
    closeWhenClickMap: true
  });

  infoWindow.open(map, marker.getPosition());
});

2.3. 窗体点击事件

主要代码：

 断油电 

   createPopupContent(point) {
        return `
         

           

           

             
车牌号码: ${point.extra.licenseName}
             
设备编号: ${point.extra.id}
             
行驶里程: ${point.baipaoGpsInfoBean.gpsMil}公里
             
今日里程: ${point.baipaoGpsInfoBean.todayMil}公里
             
最近定位位置: ${point.baipaoGpsInfoBean.location}
             
是否在线: ${point.baipaoGpsInfoBean.online ? '在线' : '不在线'}
             断油电 
              恢复油电 
           
         
       `;
      },

3 .实际应用示例

4.代码解释

createPopupContent(point) 方法

这个方法用于生成自定义信息窗的内容，根据传入的point对象，将相关信息以HTML的形式呈现。其中还包括可以点击的操作：
通过全局定义的window.handleBreak和window.handleRestore，分别绑定了两个事件处理函数，这两个函数会调用组件内部的方法this.handleBreak()和this.handleRestore()。

5.完整代码

"喜欢这篇文章吗？别忘了给个点赞哦！您的支持是我创作的动力。