const markerContent = '' +
'<div class="custom-content-marker">' +
'<span>摄像机<span>' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
'</div>'
marker.value = new AMap.Marker({
position: [cameraLngInpt.value, cameraLatInpt.value],
draggable: true,
cursor: 'move',
content: markerContent,
offset: new AMap.Pixel(-13, -30),
})
map.value.add(marker.value)
.custom-content-marker {
position: relative;
width: 100px;
height: 50px;
}
.amap-container img{
width: 24px;
height: 36px;
}
.custom-content-marker span {
float: left;
}
由于自定义图标可能会发生偏移,我这里对原文档的样式进行了调整,原文档的文字写在 var markerContent = '' 这样会造成位置偏移,解决起来更加复杂,我对其进行调整为'<span>摄像机<span>,防止了位置偏移。并对 样式进行了调整。
下面是原文档
自定义点标记内容-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)https://lbs.amap.com/demo/javascript-api-v2/example/marker/custom-icon-content