h5使用高德修改marker的样式

一般来说，如果想添加一个带图片的marker，是要设置一个new AMap.Icon，然后把这个变量传入new AMap.Marker这个变量里的icon属性，但是这么做只能单独传图片，不能改变他的样式

高德提供了new AMap.Marker这个方法来增加marker，其他的不说了，参考高德的API，有一个属性是content,这个属性可以插入一段html，如果你想做一个自定义marker，并且想给他添加边框，那么需要自己定义这个content。下面是我定义的一个带网络图片的marker,并且给他设置了圆角和边框，图片等比缩小显示中间部分，

marker.png

代码如下

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)