PC端高德地图，自定义标记点图标和样式，自定义标记点悬浮框，自定义标记点点击框，并绑定标记点点击框事件

PC端高德地图，自定义标记点图标和样式，自定义标记点悬浮框，自定义标记点点击框，并绑定标记点点击框事件

从最简单的开始，本人使用的是vue2开发，引入高德地图

npm安装高德地图

npm i @amap/amap-jsapi-loader --save

在页面使用

import AMapLoader from "@amap/amap-jsapi-loader";

// 在2021年以后申请的开发者key都需要配合安全密钥使用
window._AMapSecurityConfig = {
    // 安全密钥
    securityJsCode: "0c30xxxxxxxxxxxxxxxc912",
};

methods：{
	// 注册地图
	initMap() {
          AMapLoader.load({
              "key": "6b2fxxxxxxxxxxxxxxxxxx6f22", // 申请好的Web端开发者Key，首次调用 load 时必填
              "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
              "plugins": [
                  "AMap.MapType",
                  "AMap.Geocoder",
                  "AMap.AutoComplete"
              ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
              "AMapUI": { // 是否加载 AMapUI，缺省不加载
                  "version": '1.1', // AMapUI 版本
                  "plugins": ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
              },
              "Loca": { // 是否加载 Loca， 缺省不加载
                  "version": '2.0' // Loca 版本
              },
          })
          .then((AMap) => {
              let satellite = new AMap.TileLayer.Satellite();
              let roadNet = new AMap.TileLayer.RoadNet();
              this.layers = [satellite, roadNet]
       
              let mapCenter = [120.121827,30.948273]
              this.map = new AMap.Map("mapContainer", {
                  zoom: 15, //初始化地图级别
                  center: [lng, lat], //初始化地图中心点位置
                  layers: this.layers, //添加卫星图层，如果是标准图层则不需要添加这个属性
              });
              
              for (const value of this.markerList) {
              	  // this.setMapMarker() 这个方法是批量添加标记点的方法
                  this.setMapMarker(value)
              }
              
              //点击获取经纬度;
              this.map.on("click", (e) => {
                  // console.log(e)
              });
          })
          .catch((err) => {
          // 错误
              // console.log(err);
          });
      },
      // 批量添加标记点
      setMapMarker(marker) {
          let icon = new AMap.Icon({
              size: new AMap.Size(40, 50),    // 图标尺寸
              image: `/images/slices/${marker.typeCode}_${marker.grade}.png`,  // Icon的图像，这个图标必须放在public文件夹下面才能获取到
              // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
              // imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
          })
          // 自动适应显示想显示的范围区域
          this.map.setFitView();
          this.marker = new AMap.Marker({
              map: this.map,
              position: [marker.longitude, marker.latitude],
              offset: new AMap.Pixel(0, 30),
              icon: icon,
          });
          // 自定义悬浮框的内容  data-id在原生上绑定自定义id属性
          this.marker.content = `
              <div data-id="${marker.architectureName}" class="mapMarker flex flex_column align_center">
        		
              </div>
          `
          // mouseover即为鼠标悬浮标记点上面要去执行的事件
          this.marker.on('mouseover', this.infoOpen);
          // mouseout即为鼠标离开标记点要去执行的事件
          // this.marker.on('mouseout', ()=>{
          	   // this.map.clearInfoWindow()即为关闭悬浮框的事件
          //   this.map.clearInfoWindow()
          // });
          // click点击标记点要去执行的事件
          this.marker.on('click', this.onMarker);
          // 自动适应显示想显示的范围区域
          this.map.setFitView();
          // 添加标记点
          this.map.add(this.marker);
      },
      // 打开鼠标悬浮弹框方法，原封不动复制即可，注意map是在data中声明的全局变量所以可以用this，详见initeMap()方法
      infoOpen(e) {
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(15, 275)});
          infoWindow.setContent(e.target.content);
          infoWindow.open(this.map, e.target.getPosition());
      },
      // 点击标记点位方法
      onMarker(e){
        let marker
        for (const value of this.markerList) {
            // 这里去用正则获取你data-id上面绑定的内容，并且和点位列表对比，拿到点击的点位的信息，详见setMapMarker()方法this.marker.content这一行
            if(value.architectureName == (/\"(.+?)\"/.exec(e.target.content)[1])){
              marker = value
              this.clickMarkerData = value
            }
        }
        // 点击标记点之后去关闭地图上所有弹框
        this.map.clearInfoWindow()
        // 设置点击框的偏移量以及内容
        let infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(15, 420), // 偏移量
          isCustom: true, // 是否自定义内容
          content: this.innerHtmlOnMarker(marker) //自定义点击框里面的内容
        });
        // 打开自定义点击框的方法
        infoWindow.open(this.map, [marker.longitude, marker.latitude])
      },
      // 添加点击标记点的弹框信息
      innerHtmlOnMarker(marker){
        let info
        // 注意模板字符串里面的所有图片都要放到public里面，不然找不到
        // 注意下面这个οnclick="onPopupShow()"事件，绑定的原生事件
        // 需要在mounted(){}里面定义全局方法
        // mounted(){
        	  // window全局对象上定义一个这样的方法
      		  // window.onPopupShow = this.onPopupShow
        // }
        info = `
          <div class="clickMarker flex flex_column align_center">
              <div class="item align_center justify_center" οnclick="onPopupShow()">
                <div class="txt">
                  查看历史数据
                </div>
                <img src="/images/slices/right_icon.png" alt="">
              </div>
          </div>
        `
        return info
      },
}

有其他使用问题的可以随时留言探讨