31.3 自定义Marker
Marker实例的内容content是可以自定义的,content属性值是字符串拼接的 DOM 元素。
//点标记显示内容 const markerContent = `<div class="custom-content-marker"> <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"> <div class="close-btn" onclick="clearMarker()">X</div> </div>`自定义内容的样式
.custom-content-marker { position: relative; width: 25px; height: 34px; } .custom-content-marker img { width: 100%; height: 100%; } .custom-content-marker .close-btn { position: absolute; top: -6px; right: -8px; width: 15px; height: 15px; font-size: 12px; background: #ccc; border-radius: 50%; color: #fff; text-align: center; line-height: 15px; box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); } .custom-content-marker .close-btn:hover{ background: #666; }