高德地图 js api 实现marker触发点击自动显示信息窗口

### 实现鼠标悬停显示信息窗口 为了在高德地图 API 中配置 Marker 以实现在鼠标悬停时显示信息窗口 (InfoWindow)，可以按照如下方法操作： #### 配置 InfoWindow 和 Marker 的事件监听器 首先，在初始化地图之后，创建一个 `InfoWindow` 对象并将其与特定的 Marker 关联起来。通过为 Marker 添加 `mouseover` 和 `mouseout` 事件监听器来控制信息窗口的显示和隐藏。 ```javascript // 创建地图实例 var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] }); // 定义要添加到地图上的标记点坐标数组 var markersData = [ {lnglat:[116.397428, 39.90923], title:'天安门广场'}, ]; // 循环遍历数据源，构建多个marker对象，并绑定infowindow弹窗效果 markersData.forEach(function(item){ var marker = new AMap.Marker({ position:new AMap.LngLat(item.lnglat[0], item.lnglat[1]), title:item.title }); // 将Marker添加至地图 map.add(marker); // 构建自定义的信息窗口内容 var infoWindowContent = '<div style="padding:5px;">'+item.title+'</div>'; // 初始化信息窗体组件 var infowindow = new AMap.InfoWindow({content:infoWindowContent}); // 绑定鼠标移入事件触发信息窗体打开 AMap.event.addListener(marker,'mouseover',function(){ infowindow.open(map, marker.getPosition()); }); // 绑定鼠标离开关闭信息窗体 AMap.event.addListener(marker,'mouseout',function(){ infowindow.close(); }); }); ``` 此代码片段展示了如何利用 JavaScript 来处理鼠标的进入 (`mouseover`) 和退出 (`mouseout`) 事件，从而动态地管理信息窗口的状态[^1]。