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

最新推荐文章于 2024-10-03 15:26:35 发布

一天28小时

最新推荐文章于 2024-10-03 15:26:35 发布

阅读量602

点赞数

本文链接：https://blog.csdn.net/Programmerwhite/article/details/117483255

版权

<!--
 * @Author: zhang gen yuan
 * @Date: 2021-06-02 18:43:49
 * @Descripttion: 
-->
<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>`
}