高德地图jsApi的多个信息窗体

code_Bo
693 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情、

信息窗体是我们在地图中常用的特性之一，在点击点位的时候，可以弹出信息窗体，得到点位的具体信息，我们在手机中使用的高德地图，点击某个点，弹出信息，是一样的到底，从官方的 API 中能够知道如何添加，但是其并不能添加多个信息窗体，下面我们了解完信息窗体以后来看一下如何实现多个信息窗体~

信息窗体

高德地图的信息窗体是描述一个点位信息的图层，我们可以在实例化图形的时候，给对应的点位添加对应的描述信息，需要注意的是，信息窗体和右键菜单不属于同一个类型图层。

  • 比如这是官方给我们的一个示例：

Snipaste_2022-12-23_15-35-12.png
我们可以自定义信息窗体内容，也可以直接使用内容的自定义，我们可以在官网的demo中查看其实现的方式，我依照于我之前的项目来进行一个设置，需要实现的效果如下：

Snipaste_2022-12-23_15-40-15.png
可以看到，我们的点位上面有一个窗体，窗体左键点击，弹出，不影响我们之前右键的逻辑，而线上的窗体可以通过右上角关闭，打开以后是直接显示的，正常来讲需要做到点击这条线路，打开线路上的窗体，但是我并没有找到线的点击事件~，大家如果有方案，还请指教哦~ （完整代码可以到代码层库 clone 比对）

    1. 实现点位信息窗体
// 配置信息窗体点击事件 外层代码
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)});

function markerClick(e) {
  infoWindow.setContent(e.target.contents);
  infoWindow.open(map, e.target.getPosition());
}

 // 抽离点位信息设置 这段代码是添加在 setMarker 方法中
markerd.contents = `<div>${marker.name}供给点</div><div>出口压力：100kPa</div><div>供给量：10m³</div><div>位置：经度${marker.position[0]},纬度${marker.position[1]}</div><div></div>`;
markerd.on('click', markerClick);
if(marker.name === '新疆'){
// 触发上面的点击事件
markerd.emit('click', {target: markerd});
    }
    1. 添加固定窗体信息
    • 原理上使用的其实还是新增一个点位，只不过点位用了自定义的 content , 我们把内容设置成为一个窗体就好了
    • 这其中右上角的关闭按钮事件，是我们自己添加的，这类其实就是获取我们这个点的实例，然后调用 remove 方法即可
    • 覆盖物管理官方文档
  // 测试点位  代码放在外层
  let testP = new AMap.Marker({
    map: map,
    content:`<a class="amap-info-close" id="testP_btn">×</a><div class="test_container"><div>西宁至乌鲁木齐管段</div>
    <div>管径：159mm</div><div>壁厚：8.2mm</div><div>管内径：142.6mm</div>
    <div>流量：5km</div><div>起点压力：100kPa</div><div>终点压力：86.2kPa</div><div>流速：17.4m/s</div>
    <div>流向：乌鲁木齐至西宁</div></div>`,
    position:[93,46]
  })
  document.getElementById('testP_btn').addEventListener('click',()=>{
    map.remove(map.getAllOverlays('marker')[0])
  })
  // 结尾我们需要把原来的 map.add(polyline) 改成 map.add([...polyline,testP])， 方便我们获取点位对象
avatar
文章
阅读
粉丝