高德地图插件的简单使用

1：首先是资源

高德开放平台 | 高德地图API (amap.com)

点进去后>点击控制台登录

2：点击开发支持会有详细的入门这里就不一一解释了

 3：工具

 坐标拾取器：可以帮你解决不知道地图的坐标问题

其他的就是生成地图的

下面是一个简单的地图：

Document * { margin: 0; padding: 0; } #container { width: 100%; height: 100vh; } /* .qwe {} */ 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: ` ${data[i].name}

tel:${data[i].tel}

`, offset: new AMap.Pixel(4, 0) }); infoWindow.open(map, data[i].posi); })// 将 markers 添加到地图 map.add(viaMarker); }

这里我用了地图的功能创建出来一个信息弹窗

教程的

下面有各种各样的功能实现跟着步骤去做就能实现