引入秘钥:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的秘钥">
初始化css样式:
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100vh;
}
</style>
html结构:
<div id="container"></div>
js:
<script type="text/javascript">
var map = new AMap.Map('container');
var map = new AMap.Map('container', {
zoom: 18, //级别
center: [113.978105, 35.286126], //中心点坐标
viewMode: '3D' //使用3D视图
});
let data = [
[113.978105, 35.286126],
[113.9212, 35.294758],
[113.890129, 35.315631]
]
let data1 = [
['国家863新乡科技产业园'],
['新乡宝龙广场'],
['新乡市第二中学']
]
for (let i = 0; i < data.length; i++) {
var viaMarker = new AMap.Marker({
position: new AMap.LngLat(data[i][0], data[i][1]),
// 将一张图片的地址设置为 icon
icon: 'img/定位.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-22, -30)
});
map.add(viaMarker);
viaMarker.on("click", function() {
infoWindow = new AMap.InfoWindow({
content: '<div style="color:blue">' + data1[i] + '</div>'
});
infoWindow.open(map, data[i]);
})
}
</script>