高德地图点击不同的标记,动态传入参数创建信息窗体

需求描述:对起点和终点进行标注,分别点击标注显示起点位置信息和终点位置信息。除了位置信息动态传入,提示信息也根据不同的点,提示不一样的文字,因此添加每个点对应的信息窗体。

1.创建地图,设置中心点和级别等配置

var mapMethods = new AMap.Map('container', {
  zoom: 10,
  center: [116.39,39.9]
})

2.创建标记信息

var startMarker = new AMap.Marker({
  position: [116.398258, 39.914600],
  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
  map: mapMethods,
})

3.创建信息窗体

var infoWindow = new AMap.InfoWindow({ 
  content: content, // 信息窗体的内容可以是任意html片段
  offset: new AMap.Pixel(16, -45),
})

4.通过点击 marker 标记,使用 setCotent 方法动态设置信息,调用 open 方法打开信息窗体

var onMarkerClick = function (e) {
  infoWindow.setContent(e.target.content); // 必须要用setContent方法
  infoWindow.open(mapMethods, e.target.getPosition())// 在地图的指定位置打开信息窗体
  // e.target就是被点击的Marker
}
startMarker.on('click', onMarkerClick)
startMarker.emit('click', {target: startMarker});
startMarker.content = `起点位置:${getData.fmAddress}`

更多详细信息,请查看 给多个点添加信息窗体 和 地图 JS API 之信息窗体。

进阶问题描述:通过上述方法的确可以添加 marker 标记,也能动态添加信息窗体信息。当我们绘制两条链接起来的线路(两条线绘制不同的颜色,表示走过的路程和未走过的路程),中间绘制三个 marker 标记时,也分别动态添加信息。点击起点和终点信息时,窗体信息显示都没有问题,但是中间那个 marker 信息标记信息就不正确,有时候是起点信息,有时又是终点信息,或者也有自己的行车信息。那么怎么解决这个问题呢?

产生的原因:这里中间的 Marker 在两条线路中,是一条线的起点,又是另一条线的终点。

此刻我们将那个独特的 Marker 标记做事件监听,然后在动态添加信息窗体的显示信息。

删除 carMarker.on(‘click’, onMarkerClick);

AMap.event.addListener(carMarker,‘click’,markerClick); // 绑定的 markerClick 事件不会立即执行,只有点击后才执行

在 markerClick 方法中做动态添加信息逻辑。

你可能感兴趣的:(高德地图)