柚子快报邀请码778899分享:前端 高德地图添加多个标注的
引入高德地图api
window._AMapSecurityConfig = {
securityJsCode: "xxxx", //高德地图秘钥
};
配置地图
AMapLoader.load({
key: "xxxx", //申请好的Web端开发者 Key,调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
}).then((AMap) => {
const map = new AMap.Map("container",{
zoom:8, //地图级别
center: [108.27331,22.78121], //地图中心
});
var markers = [ // 标注数组
{
coordinate:[108.30, 22.75],
img:'images/shdz.png',
},
{
coordinate:[108.881058, 22.875931],
img:'images/shdz.png',
},
{
coordinate:[108.8103, 23.21768],
img:'images/shdz.png',
},
{
coordinate:[109.22238,23.7521],
img:'images/shdz.png',
}
];
for (var i = 0; i < markers.length; i++) {
var marker = new AMap.Marker({
position: markers[i].coordinate,
icon:new AMap.Icon({
image:markers[i].img,
size: new AMap.Size(60, 60), //图标所处区域大小
imageSize: new AMap.Size(60,60) //图标大小
}),
offset: new AMap.Pixel(-30, -60),
map: map
});
}
polyline.setMap(map);// 添加到地图
})
.catch((e) => {
console.error(e); //加载错误提示
});
柚子快报邀请码778899分享:前端 高德地图添加多个标注的
相关阅读
发表评论