一般来说,如果想添加一个带图片的marker,是要设置一个new AMap.Icon,然后把这个变量传入new AMap.Marker这个变量里的icon属性,但是这么做只能单独传图片,不能改变他的样式
高德提供了new AMap.Marker这个方法来增加marker,其他的不说了,参考高德的API,有一个属性是content,这个属性可以插入一段html,如果你想做一个自定义marker,并且想给他添加边框,那么需要自己定义这个content。下面是我定义的一个带网络图片的marker,并且给他设置了圆角和边框,图片等比缩小显示中间部分,
代码如下
var startMarker = new AMap.Marker({
position: new AMap.LngLat(element.center[0],element.center[1]),
// icon: startIcon,
offset: new AMap.Pixel(-13, -30),
content: "<div class='mapIconBgView' style='background-image:url("+element.url+");background-position:center;background-size:cover;background-repeat: no-repeat'></div>"
});
css:
.mapIconBgView {
width: 4rem;
height: 4rem;
border: 0.2rem solid white;
justify-content: center;
display: flex;
border-radius: 0.8rem;
overflow: hidden;
}
如果想要添加多个marker,需要把这些marker添加到一个数组layerArr,然后把数组添加到地图上
map.add(layerArr)