前端知识笔记（十七）———地图多点标注功能-阿里云开发者社区

前端知识笔记（十七）———地图多点标注功能

2023-12-12 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端知识笔记（十七）———地图多点标注功能

使用坐标以及其他软件的功能了将地图带导入，并实现地图多点标注的功能

<!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>

前端知识笔记（十七）———地图多点标注功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景