高德地图 自定义marker+信息窗口

先上效果图

首先在index.html引入高德地图，你的key。其中plugin后面拼接是是所依赖的插件。版本不同，有些写发也不同，望注意；这里我使用2.0版本。

<script src="https://webapi.amap.com/maps?v=2.0&key= yourKey &plugin=AMap.MarkerClusterer&plugin=AMap.Autocomplete"></script>

一个盒子，定义宽高。

<div id="container"></div>

地图初始化，mapstyle我使用的是内置的暗黑主题，如有需要，可去高德文档查找别的类型。
由于怕一下全部渲染地图上的所有marker点数据多，这里逻辑是，只渲染视图上地图的marker点。
前后端配合，前端传maxLng, minLng, maxLat, minLat给后端，后端返回应该渲染的数据；

build_map_online() { //初始化地图
        let map = new AMap.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          mapStyle: "amap://styles/darkblue",
          zoom: 12,//缩放程度
        })
        map.on("zoomend", (e)=> {//监听地图缩放
        	this.markers_init(map);
        });
        map.on("dragend", (e)=> {//监听地图拖曳
        	this.markers_init(map);
        });
        this.map = map;
      }

注意：其中图片路径我是放在public目录下，建了一个image文件夹放图片；

markers_init(map) {
        map.clearMap(); // 清除地图上所有添加的覆盖物
        let limitBounds = map.getBounds();
        let maxLng = limitBounds.northEast.lng;
        let minLng = limitBounds.southWest.lng;
        let maxLat = limitBounds.northEast.lat;
        let minLat = limitBounds.southWest.lat;
        maxMap(maxLng, minLng, maxLat, minLat, this.menuList).then(res=>{
        //获取地图视图 极值
          if(res.resp_code == 1){
            let arr = []
            res.datas.forEach(item=>{
              let point = new AMap.LngLat(+item.lng,+item.lat);
              //iconfont类是配合阿里图标库一起使用，避免多个pic，造成打包过大；
              //this.$myfun.get_color()自定义方法，return色号，实现渐变色效果
              let markerContent = `
                
${this.$myfun.get_color(0)};
                background-image:linear-gradient(to right,${this.$myfun.get_color(0,.8)},${this.$myfun.get_color(0,.3)});">
                  ${this.$myfun.get_icon(item.device_type)}
                
              `
              let marker = new AMap.Marker({
                position:point,
                offset: new AMap.Pixel(-13, -30),
                content: markerContent,//自定义marker内容
              })
              map.add(marker);
              //接下来是marker的点击事件，点击展示 自定义信息窗口；
              marker.on('click',()=>{
                infoWindow.open(map, marker.getPosition());
              })
              map.on("click", ()=> {
              	infoWindow && infoWindow.close();
              });
              //这里业务需要，根据状态，点击展示不同的信息框，背景图/高度/内容 有差异，所有提取出来。
              //仅供参考
              let backPicUrl = '';let backPicHeight= '200px';let closePic = '';let lineHeight = "26px"
              backPicUrl = './image/dialog-Blue.png';
              closePic = './image/close-Blue.png';
              let content = [];let title = ''
              content.push(`
                
${backPicHeight};padding:15px;line-height:${lineHeight};
                background: url(${backPicUrl});background-size: 100%;position:relative;">
                  ${closePic}" class="closeLogo" οnclick="closeInfoWindow()">
                  
产品类型：${item.device_type}
                  
产品序号：${item.device_qrcode}
                  
${ item.status!=1 ? 'class="hidden"' : 'class="text-yellow"' } >故障原因：低电压
                  
${ item.status!=2 ? 'class="hidden"' : 'class="text-red"' } >报警原因：测试测试
                  
${ item.status!=2 ? 'class="hidden"' : '' } >负责人：丁贤 12348174501

                  
安装位置：${item.installocation}
                  
详细地址：${item.address}
                  
${ item.status==2 ? 'class="hidden"' : 'class="dx-detail"' } >点击查看详情 
                  
${ item.status!=2 ? 'class="hidden"' : '' }>
                    
按钮
                    
按钮
                    
按钮
                    
按钮
                  
                
              `)
              var infoWindow = new AMap.InfoWindow({
                  isCustom: true,  //使用自定义窗体
                  content: this.createInfoWindow(content,closePic),
                  offset: new AMap.Pixel(12, -30)
              })
              this.map = map;
            })
          }
        })
      },

然后是createInfoWindow函数，创造信息窗口；

createInfoWindow(content,closePicSrc){
        let info = document.createElement("div");
        info.style.width = "300px";//宽度设置
        let middle = document.createElement("div");// 定义中部内容
        middle.innerHTML = content;
        info.appendChild(middle);
        return info
      }