需求：每个门店都有自己的配送范围，点击门店，需要根据坐标组标注出来，并且带上门店的logo和名称，下面我们来写一下demo吧：
效果图如下：
百度地图高德地图都是同样的道理，写法稍微有区别，这里使用的是高德
需要引入地图：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
关键代码：
function drawStore(obj) {
map.clearMap();
// 获取门店范围数据
// 得到门店范围经纬度集合,根据实际数据的格式来：
let areaPoints = ...(这里拿到了数组)
// 创建坐标组合：
let pointArrar = areaPoints.map(pointString => {
let points = pointString.split(',');
return new AMap.LngLat(points[0], points[1]);
})
let options = {
path: pointArrar,
fillColor: genColor(), // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: genColor(), // 线条颜色
strokeOpacity: 0.5,
fillOpacity: 0.2
}
var polygon = new AMap.Polygon(options);
map.add(polygon);
// 创建dominos标识，并且添加进地图当中：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
let logoMk = new AMap.Marker({
icon: "图片地址",
position: [obj.lng, obj.lat]
});
map.add(logoMk);
//如果你想改变大小：
const newIcon = new AMap.Icon({
size: new AMap.Size(52, 26), // 图标尺寸
image: "你的图片地址", // Icon的图像
imageSize: new AMap.Size(26,26), // 根据所设置的大小拉伸或压缩图片
})
logoMk.setIcon(newIcon);
// 添加门店名称label，创建文本标注对象：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
logoMk.setLabel({ offset: new AMap.Pixel(-10, -20), content: obj.storeName || obj.storeCode });
// 移动地图到指定的坐标
map.panTo([obj.lng, obj.lat]);
}
好了，到这里就结束了
