最近项目开发中遇到了高德地图自定义点的样式，点击展示信息窗体的需求。做个总结！

初始化地图展示点和点击展示信息窗体

我们用的Vue开发的，所以在这儿我用Vue中例子来说！

1、html标签创建地图放置的容器

//要给地图添加宽高属性
<div id="container" class="map" tabindex="0"></div>

2、在methods中定义方法，写展示地图内容的所有逻辑：

methods:{
   //初始化地图，mounted钩子函数中调用！
   initCreateMap(){
      //创建地图实例，挂载到上面定义的html标签元素上，给到一个变量后续操作
      let map = new AMap.Map("container", {
          resizeEnable: true,//是否自适应地图容器尺寸的变化
          center: [120.980899, 31.385374],//初始地图的中心点坐标
          zoom: 11,//地图展示层级
          mapStyle: "amap://styles/fresh", // 极夜蓝，地图的风格样式
      });

      //定义点击展示一些信息的窗体
      let infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(6, -20),//设置偏移量
      });
      //获取到服务器的数据（经纬度，名称、地址等你要展示的信息）
      let data = this.parkInfoMarks;
      //自定义地图点位图标
      let startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(35, 35),
        // 图标的取图地址
        image: require('../assets/img/park.png'),
        // 图标所用图片大小
        imageSize: new AMap.Size(35, 35),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      });
      //定义多个点位的数据列表
      let mapMarkerList = [];

      for (let i = 0; i < data.length; i++) {
        //经纬度，点位渲染
        let longitude = data[i].longitude;
        let latitude = data[i].latitude;
        
        //定义单个点位的基本信息
        let marker = new AMap.Marker({
          position: [longitude, latitude], //正确写法
          icon: startIcon,//上面定义的你的图标样式在这儿
          content: data[i],//你要展示的数据，循环带到content上，展示的时候使用
          offset: new AMap.Pixel(-10, -10),//点位的偏移量
        });
        
        //给点添加点击事件，在这儿也能添加鼠标移入事件
        marker.on("click", markerClick);
        mapMarkerList.push(marker);//所有点位推到上面的定义的点位数据列表中
        map.add(mapMarkerList);//调用map的add方法点位列表渲染到地图中
      }
        
        //点位点击事件，展示信息窗体
        function markerClick(e) {
            console.log(e);
            let data = e.target.content
            //通过类选择器给窗体添加样式
            infoWindow.setContent(`
                  <div class="infowindows">
                      <h2>${data.parkName}停车场</h2>
                      <p>地址：${data.address}</p>
                     
                  </div>
                `);
            infoWindow.open(map, e.target.getPosition());
      }
    }      
}

官方API文档地址：

点标记-点标记-示例中心-JS API 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/javascript-api/example/marker/marker-content/

目前正在学习中，如有错误请及时指正！！！

标签：自定义,展示,地图,撒点,API,let,AMap,new,data
来源： https://blog.csdn.net/annans/article/details/121903404