使用坐标以及其他软件的功能了将地图带导入，并实现地图多点标注的功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>map地图绘制</title> <style> * { margin: 0; padding: 0; } #content { width: 99%; height: 99vh; } img{ width: 40px; height: 40px; } .mark{ padding: 20px; color: grey; } .mark p{ color: blue; } </style> </head> <body> <div id="content"></div> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "2934f3d69084c5ae500cce3e6855e62b", } </script> <script src="https://webapi.amap.com/loader.js"></script> <script type="text/javascript"> AMapLoader.load({ key: "74991feb2ee5e1d7e05a8cda1614652f", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 }).then((AMap) => { renderMap(AMap) }).catch((e) => { console.error(e); //加载错误提示 }); let data = [{ name:"威海市", lat:"122.120519", long:"37.513315", tel:"11111111111" },{ name:"威海北站", lat:"122.047161", long:"37.496677", tel:"22222222222" },{ name:"邓家寨", lat:"122.102509", long:"37.447291", tel:"33333333333" },{ name:"桃子山", lat:"122.080536", long:"37.441989", tel:"44444444444" },{ name:"石门", lat:"122.104105", long:"37.481323", tel:"55555555555" },{ name:"佛顶", lat:"122.085265", long:"37.483542", tel:"66666666666" },{ name:"荷花湾", lat:"122.190729", long:"37.512619", tel:"77777777777" },{ name:"猫头山", lat:"122.149186", long:"37.555918", tel:"88888888888", },{ name:"日岛", lat:"122.206701", long:"37.47929", tel:"99999999999" }] function renderMap(AMap) { const map = new AMap.Map('content', { zoom: 12.5, //初始地图级别 center: [data[0].lat, data[0].long], //初始地图中心点 }); for (let i = 0; i < data.length; i++) { // 以 icon URL 的形式创建一个途经点 var viaMarker = new AMap.Marker({ position: new AMap.LngLat(data[i].lat, data[i].long), // 将一张图片的地址设置为 icon icon: './img/地图,图钉,标记,标点.png', // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点 offset: new AMap.Pixel(-20, -40) }); viaMarker.on("click",function(){ var infoWindow = new AMap.InfoWindow({ // isCustom: true, //使用自定义窗体 content: ` <div class="mark"> <h3>${data[i].name}</h3> <p>tel:${data[i].tel}</p> </div> `, offset: new AMap.Pixel(16, -45) }); infoWindow.open(map,[data[i].lat, data[i].long]); }) map.add(viaMarker); } var satelliteLayer = new AMap.TileLayer.Satellite(); map.add(satelliteLayer); } </script> </body> </html>
