Marker
- 适用于纯Icon标志物
- 属于Geometry,可以利用图层进行管理(addGeometry、removeGeometry、clear等)
- 设置信息框时,可通过setInfoWindow方法进行信息框声明,再通过openInfoWindow、closeInfoWindow等方法控制信息框的展示与否
const marker = new maptalks.Marker(point, {
symbol: {
markerFile: icon
},
})
marker.setInfoWindow({
title: 'Test',
content: 'This is a sample.'
})
marker.on('mouseenter', () => {
marker.openInfoWindow()
})
marker.on('mouseout', () => {
marker.closeInfoWindow()
})
UIMarker
-
适用于展示数据的标志物
-
本质上相当于把Dom元素贴在地图上,不可利用图层进行管理,只能addTo Map。有循环逻辑时,在新增标志物前需要使用UIMarker自己的remove方法移除老标志物
-
设置信息框时,需要通过InfoWindow自身new方法进行创建,并通过show方法设置经纬度展示到所需位置
const ele = createEleFunc(data)
const pos = [data.lon, data.lat]
const UIMarker = new maptalks.ui.UIMarker(pos, {
content: ele,
}).addTo(map)
this.UIMarkerList.push(UIMarker)
UIMarker.on('mouseenter', () => {
this.infoWindow = new maptalks.ui.InfoWindow({
title: 'Test',
content: 'This is a sample.',
}).addTo(map)
this.infoWindow.show(new maptalks.Coordinate(pos))
})
UIMarker.on('mouseout', () => {
this.infoWindow?.hide()
})