高德地图覆盖物如何自定义图标

高德地图覆盖物如何自定义图标

我们从官方获得的多边形绘制代码如下：

var polygonArr = new Array();//多边形覆盖物节点坐标数组 polygonArr.push([121.522421,31.269413]);

polygonArr.push([121.522099,31.269271]);

polygonArr.push([121.521793,31.269106]);

polygonArr.push([121.521943,31.268908]);

polygonArr.push([121.522088,31.26872]);

polygonArr.push([121.522437,31.268881]);

polygonArr.push([121.522737,31.26905]);

polygonArr.push([121.522576,31.269248]);

var polygon = new AMap.Polygon({

path: polygonArr,//设置多边形边界路径

strokeColor: "blue", //线颜色

strokeOpacity: 0.8, //线透明度

strokeWeight: 5, //线宽

fillColor: "#0091fc", //填充色

fillOpacity: 0.6,//填充透明度

});

polygon.setMap(map);

这样我们运行代码得到的效果如下图：

可以看到此覆盖物上方的图标为默认的图标，我们通过查看AMap.Polygon类查看它的构造函数中的参数发现也没有icon选项，那么如何打到自定义图标的目的呢？

我们可以通过添加icon的方式定位在此覆盖物上方：

//给覆盖物添加自定义图标

new AMap.Marker({

map: map,

position: [121.522265,31.269083],

icon: new AMap.Icon({

size: new AMap.Size(32, 32), //图标大小

image: "图标的url地址"

})

});

再次运行大家可以看到效果已经出来了哦：