前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高德地图信息框作为组件

高德地图信息框作为组件

作者头像
tianyawhl
发布2022-01-20 16:58:01
4660
发布2022-01-20 16:58:01
举报
文章被收录于专栏:前端之攻略

信息框如果用html拼接字符串的方式来实现,感觉比较麻烦,下面是使用组件的方式来实现。

组件:mapInfoCom.vue

代码语言:javascript
复制
<template>
  <div>
    <el-button>{{id}}btn</el-button>
    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
      <div id="del-div">
        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
      </div>
      <div style="text-align: center;">
        <h4>详 情</h4>
      </div>
      <p v-if="isInfo">部署 : 测试一下</p>
      <p v-if="isInfo">地点 : 测试一下2222</p>
      <p v-if="isInfo">说明 : 测试一下111111</p>
      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暂无信息</p>
      <div id="infoWindowTool">
        <el-link type="primary" @click="edit()">编辑</el-link>
        <el-link type="primary" @click="del()">删除</el-link>
      </div>
    </el-card>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
 
  </div>
</template>
<script>
export default {
  data() {
    return {
      overlay: null,
      infoWindow: null,
      isInfo: true,
      id:""
    };
  },
  methods: {
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
      this.id = e.id,
      console.log(this.id)
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    edit() {
      console.log("编辑按钮测试");
    },
    del() {
      console.log("删除按钮测试");
    }
  }
};
</script>
 
<style lang="css" scoped>
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20;
  top: 20;
  transform: scale(1.2);
}
</style>

home.vue

代码语言:javascript
复制
<template>
  <div>
    <div id="GDMap" style="height: calc(100vh - 100px)"></div>
    <infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
  </div>
</template>

<script>
import loadMap from "@/assets/js/loadMap.js";
import infoWindowComponent from "./mapInfoCom.vue"

export default {
  components:{infoWindowComponent},
  data() {
    return {
      DialogVisible: false,
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.4",
      GDMap: null,
      lnglats: [
        { id:1,position: [119.98186101, 31.77139674], flag: 0, state: 1 },
        { id:2,position: [119.98186101, 31.76139674], flag: 0, state: 2 },
        { id:3,position: [119.99186101, 31.76139674], flag: 0, state: 3 },
        {
          id:4,
          position: [119.97186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小王",
        },
        {
          id:5,
          position: [119.96186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小李",
        },
      ],
    };
  },
  methods: {
    showMap() {
      loadMap(this.key, this.plugins, this.v)
        .then((AMap) => {
          this.GDMap = new AMap.Map("GDMap", {
            zoom: 10,
            resizeEnable: true,
            keyboardEnable: false,
          });
          this.GDMap.on("complete", () => {
            this.showMarker();
          });
        })
        .catch(() => {
          console.log("地图加载失败!");
        });
    },
    showMarker() {
      let lnglats = this.lnglats;
      for (let i = 0; i < lnglats.length; i++) {
        var Icon;
        var Label;
        if (lnglats[i].flag == 0) {
          if (lnglats[i].state == 1) {
            Icon = require("@/assets/imgs/MapAlarm.png");
          } else if (lnglats[i].state == 2) {
            Icon = require("@/assets/imgs/MapOffline.png");
          } else if (lnglats[i].state == 3) {
            Icon = require("@/assets/imgs/MapOnline.png");
          }
        } else if (lnglats[i].flag == 1) {
          Icon = require("@/assets/imgs/online-people.png");
          Label = lnglats[i].label;
        }

        var marker = new AMap.Marker({
          icon: Icon,
          position: lnglats[i].position,
          map: this.GDMap,
        });
        marker.id = lnglats[i].id
        console.log(Label);
        //if(typeof(Label)!=="undefined"){
        if (Label !== undefined) {
          marker.setLabel({
            offset: new AMap.Pixel(32, 10), //设置文本标注偏移量
            content:
              "<div class='info' style='color:#e98b05;'>" + Label + "</div>", //设置文本标注内容
            //direction: 'right' //设置文本标注方位
          });
        }
       
        if (lnglats[i].flag == 0) {
          marker.on("click", this.markerClick);
        }
      }
    },
    markerClick(e) {
      // console.log(e.target.id)
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        content:this.$refs.infoWindowComponent.$el,
        offset: new AMap.Pixel(16, -45),
      });
      infoWindow.open(this.GDMap, e.target.getPosition());
      this.$refs.infoWindowComponent.initialize({
        id:e.target.id,
        overlay: "info",
        infoWindow: infoWindow
      });
    },
    createInfoWindow(title) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;
      
      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);
      return info;
    },
    closeInfoWindow() {
      // alert("close")
      this.GDMap.clearInfoWindow();
    },
  },

  mounted() {
    this.showMap();
  },
};
</script>

<style>
table tr td{border:1px solid #ccc;}
.custom-info {
  height: 200px;
  background: red;
}
/* .v-modal{z-index:5 !important;} */
.amap-sug-result {
  z-index: 2024;
}
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/04/24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档