vue 实现高德地图自定义信心窗体

在这里插入图片描述

<template>
  <div class="app-container" :style="{ height: windowHeight - 50 + 'px' }">
    <div id="container"></div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        //实时屏幕高度
        windowHeight: document.documentElement.clientHeight,
        map: null,
        infoWindow: null
      }
    },
    mounted() {
      // 当浏览器被重置大小时执行
      window.onresize = () => {
        return (() => {
          this.windowHeight = document.documentElement.clientHeight;
        })()
      };
      //调用地图初始化方法
      this.initAMap()
    },
    methods: {
      initAMap() {
        //地图初始化时,在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.481181, 39.989792],
          zoom: 16
        });

        this.addMarker();

        let content = [];
        //实例化信息窗体
        content.push("<div style=\"background: white;width: 400px;border: 2px solid #ccc;padding: 10px;border-radius: 10px\">\n" +
          "      <div style=\"width: 400px;height: 20px;line-height: 20px;\">\n" +
          "        <span style=\"display: inline-block; vertical-align: middle;\">方恒假日酒店  <span style=\"color:#F00;\">价格:318</span></span>\n" +
          "        <img id=\"closeX\" style=\"cursor:pointer; display:inline-block;vertical-align: middle;float: right;padding-right: 20px;padding-top: 5px\" src=\"https://webapi.amap.com/images/close2.gif\" alt=\"关闭\">\n" +
          "      </div>\n" +
          "      <hr>\n" +
          "      <div style=\"float: left;height: 100px;margin: 5px 10px\">\n" +
          "        <img src=\"http://tpc.googlesyndication.com/simgad/5843493769827749134\">\n" +
          "      </div>\n" +
          "      <div style=\"font-size: 12px;width: 360px;\">\n" +
          "        <div>地址:北京市朝阳区阜通东大街6号院3号楼东北8.3公里</div>\n" +
          "        <div style=\"margin: 5px 10px;\">电话:010-64733333</div>\n" +
          "        <div style=\"margin: 5px 10px;color: #20a0ff\"><a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a></div>\n" +
          "      </div>\n" +
          "    </div>");

        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: content, //调用创建信息窗体的方法--信息窗体的内容
          offset: new AMap.Pixel(16, -45)
        });
        /*
            给信息窗体添加一个打开事件
            因为只有窗体打开了, 才会加载dom元素, 然后给dom元素绑定事件
            而且, 必须是通过id获取 同过class获取不到
            这一个弄了半天, 太难了
         */
        this.infoWindow.on('open', this.showInfoOpen)
      },

      //打开信息窗体
      showInfoOpen() {
        let closeX = document.getElementById("closeX")
        //方法一: 为dom元素绑定js事件
        closeX.onclick = this.closeInfoWindow
        //方法二: 为dom元素绑定js事件
        //.addEventListener("click", this.closeInfoWindow)
      },

      //添加marker标记
      addMarker() {
        let that = this;
        that.map.clearMap();
        let marker = new AMap.Marker({
          map: this.map,
          position: [116.481181, 39.989792]
        });
        //鼠标点击marker弹出自定义的信息窗体
        marker.on('click', function () {
          that.infoWindow.open(that.map, marker.getPosition());
        });
      },

      //关闭信息窗体
      closeInfoWindow() {
        this.map.clearInfoWindow();
      }
    }
  }
</script>

<style scoped>
  #app-container {
    width: 100%;
    position: relative;
  }

  #container {
    width: 100%;
    height: 100%;
  }

  .info {
    position: absolute;
    background: white;
    padding: 10px;
    right: 30px;
    top: 30px;
  }
</style>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue高德地图自定义标记可以通过以下步骤实现: 1. 在Vue组件中引入高德地图API: ``` import AMapLoader from '@amap/amap-jsapi-loader'; ``` 2. 在Vue组件中定义地图容器,并在mounted钩子函数中加载地图: ``` <template> <div id="map-container"></div> </template> <script> export default { data() { return { map: null, }; }, mounted() { AMapLoader.load({ key: 'your-api-key', version: '2.0', plugins: ['AMap.Marker'], }).then(() => { this.initMap(); }); }, methods: { initMap() { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13, }); }, }, }; </script> ``` 3. 在Vue组件中定义自定义标记的样式,并使用AMap.Marker类创建自定义标记对象: ``` <template> <div id="map-container"></div> </template> <script> export default { data() { return { map: null, markerStyle: { width: '24px', height: '24px', background: 'url("your-marker-icon.png") no-repeat', backgroundSize: '100% 100%', }, }; }, mounted() { AMapLoader.load({ key: 'your-api-key', version: '2.0', plugins: ['AMap.Marker'], }).then(() => { this.initMap(); this.addMarker(); }); }, methods: { initMap() { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13, }); }, addMarker() { const marker = new AMap.Marker({ position: [116.397428, 39.90923], map: this.map, icon: new AMap.Icon(this.markerStyle), }); }, }, }; </script> ``` 4. 根据需要,可以在自定义标记上添加事件监听器: ``` <template> <div id="map-container"></div> </template> <script> export default { data() { return { map: null, markerStyle: { width: '24px', height: '24px', background: 'url("your-marker-icon.png") no-repeat', backgroundSize: '100% 100%', }, }; }, mounted() { AMapLoader.load({ key: 'your-api-key', version: '2.0', plugins: ['AMap.Marker'], }).then(() => { this.initMap(); this.addMarker(); }); }, methods: { initMap() { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13, }); }, addMarker() { const marker = new AMap.Marker({ position: [116.397428, 39.90923], map: this.map, icon: new AMap.Icon(this.markerStyle), }); marker.on('click', () => { alert('Marker clicked!'); }); }, }, }; </script> ``` 以上就是Vue高德地图自定义标记的实现方法。需要注意的是,自定义标记的样式需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸥总

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值