高德地图根据状态定位自定义图标点击显示 infoWindow

绝地灬酷狼 2022-10-14 01:13 716阅读 0赞

<template>
      <div style="width: 100%; height: 100vh" id="container"></div>
    </template>
    <script>
    import AMap from "AMap";
    import {  getMap, detailOrgInfo } from "@/api/screen/home.js";
    import {  mapinfoWindow } from './map.js';
    export default { 
      data() { 
        return { 
          map: null,
          infoWindow: null,
        };
      },
      mounted() { 
        this.billList();
        this.init();
      },
      methods: { 
        init: function () { 
          this.map = new AMap.Map("container", { 
            resizeEnable: true,
            center: window.myPublicObject.center,
            zoom: 13,
          });
          this.map.setMapStyle("amap://styles/5376c1b4bdbc42d79378f3f7161b80a5");
          this.infoWindow = new AMap.InfoWindow({ 
            offset: new AMap.Pixel(0, -30),
          });
          this.map.clearMap();
        },
        billList() { 
          getMap().then((res) => { 
            if (res.data.code == 200) { 
              let vlastLocation = res.data.data;
              vlastLocation.forEach((value, index, array) => { 
                let postion = [];
                postion.push(array[index].lng);
                postion.push(array[index].lat);
                switch (value.type) { 
                  case "1":
                    var icon = new AMap.Icon({ 
                      size: new AMap.Size(100, 100),
                      image: require("./iconImg/4.png"),
                      imageSize: new AMap.Size(47, 58),
                    });
                    break;
                  case "2":
                    var icon = new AMap.Icon({ 
                      size: new AMap.Size(100, 100),
                      image: require("./iconImg/3.png"),
                      imageSize: new AMap.Size(47, 58),
                    });
                    break;
                  case "3":
                    var icon = new AMap.Icon({ 
                      size: new AMap.Size(100, 100),
                      image: require("./iconImg/5.png"),
                      imageSize: new AMap.Size(47, 58),
                    });
                    break;
                  case "4":
                    var icon = new AMap.Icon({ 
                      size: new AMap.Size(100, 100),
                      image: require("./iconImg/1.png"),
                      imageSize: new AMap.Size(47, 58),
                    });
                    break;
                  case "5":
                    var icon = new AMap.Icon({ 
                      size: new AMap.Size(100, 100),
                      image: require("./iconImg/2.png"),
                      imageSize: new AMap.Size(47, 58),
                    });
                    break;
                }
                var marker = new AMap.Marker({ 
                  position: postion,
                  offset: new AMap.Pixel(-10, -10),
                  icon,
                  zoom: 13,
                });
                marker.id = value.id;
                marker.setMap(this.map);
                marker.on("click", (e) => { 
                  detailOrgInfo({  id: e.target.id }).then((res) => { 
                    if (res.data.code == 200) { 
                      let obj = res.data.data;
                      this.infoWindow.setContent(mapinfoWindow(obj));
                      this.infoWindow.open(this.map, e.target.getPosition());
                    }
                  });
                });
              });
            }
          });
        },
      },
    };
    </script>
    <style>
    .amap-info-content { 
      padding: 0;
    }
    </style>

## map.js 显示infoWindow 弹框的内容 ##

/* * @Author: zhang gen yuan * @Date: 2021-06-03 15:34:12 * @Descripttion: */
    
    
    export function mapinfoWindow(obj) { 
        return `<div style="width: 400px;
       height: 248px;
       background: #122062;
       border: 1px solid #394EAE;
       box-sizing: border-box;
       padding:20px;
       overflow:auto;
       ">
       <div style="
         font-size: 22px;
         font-family: Microsoft YaHei;
         font-weight: bold;
         color: #FFFFFF;
       ">${ obj.name}</div>
       <div style="
           width:100%;
           font-size: 16px;
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #FFFFFF;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           padding:8px 0;
         ">${ obj.orgInfo.businessAddress}</div>
         <div>
          ${ obj.orgInfo.imgOther.split(",").map((item) => { 
            return `<img src="${item}" style="width:32%;height:110px;"></img>`;
        })}
         </div>
         <div style="
           width:100%;
           display:flex;
           justify-content: space-between;
           padding:5px;
         ">
           <div style="
               font-family: Microsoft YaHei;
               font-weight: bold;
               color: #FFA200;
           ">¥${ obj.orgInfo.bedMin}/月起</div>
           <div style="
             font-size: 14px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #848FC3;
             cursor: pointer;
           ">查看详情<i class="el-icon-arrow-right"></i></div>
         </div>
    <div>`
    }