1：首先是资源
点进去后>点击控制台登录
2：点击开发支持会有详细的入门这里就不一一解释了
3：工具
坐标拾取器：可以帮你解决不知道地图的坐标问题
其他的就是生成地图的
下面是一个简单的地图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=346e4aa4dc6444f5a7f69bf1ff66ca1a"></script> <style> * { margin: 0; padding: 0; } #container { width: 100%; height: 100vh; } /* .qwe {} */ </style> </head> <body> <div id="container"> </div> </body> <script> var map = new AMap.Map('container', { zoom: 16,//级别 center: [113.978255, 35.281454],//中心点坐标 viewMode: '3D'//使用3D视图 }); let data = [ { name: "十点半", tel: 123456789, posi: [113.98, 35.28] }, { name: "阿迪斯", tel: 45678909876, posi: [113.92, 35.29] }, { name: "盎司九百", tel: 0987656789876, posi: [113.93, 35.28] } ] for (let i = 0; i < data.length; i++) { // 以 icon URL 的形式创建一个途经点 var viaMarker = new AMap.Marker({ position: new AMap.LngLat(data[i].posi[0], data[i].posi[1]), // 将一张图片的地址设置为 icon icon: './img/位置.png', // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点 offset: new AMap.Pixel(-13, -30) }); viaMarker.on('click', function () { infoWindow = new AMap.InfoWindow({ content: ` <div class="qwe"> <h3>${data[i].name}</h3> <p>tel:${data[i].tel}</p> </div> `, offset: new AMap.Pixel(4, 0) }); infoWindow.open(map, data[i].posi); })// 将 markers 添加到地图 map.add(viaMarker); } </script> </html>
这里我用了地图的功能创建出来一个信息弹窗
教程的
下面有各种各样的功能实现跟着步骤去做就能实现
