引入秘钥:
<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>