引入高德地图api
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
配置地图
<script type="text/javascript">
AMapLoader.load({
key: "xxxx",
version: "2.0",
}).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);
});
</script>
<div id="container"></div>