vue 高德地图 自定义信息窗体内的事件交互 以及自定义事件

1.引入高德地图(在vue的index.html)

 <!--1 引入高德地图 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>

2.创建项目页面(完整代码)

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

<script>
export default {
  data() {
    return {
      //要标记的所有点的经纬度
      lnglats: [
        [108.909074, 34.254225],
        [108.910766, 34.254348],
        [108.910495, 34.253531],
        [108.909502, 34.253571],
      ],
    };
  },
  mounted() {
    this.setMapChart();
  },
  methods: {
    //创建地图实例
    setMapChart() {
        //地图实例
      let map = new AMap.Map("container", {
        resizeEnable: true, //自适应大小
        zoom: 13, //初始化视窗
        pitch: 70, // 地图俯仰角度,有效范围 0 度- 83 度
        viewMode: "3D", // 地图模式
      });
      // AMap是高德地图的构造函数,这里.Map是创建地图,.Marker是创建坐标点
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      //遍历生成多个标记点
      for (var i = 0, marker; i < this.lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: this.lnglats[i], //不同标记点的经纬度
          map: map,
        });
        //内部样式
        marker.content = `<div style="width: 265px; height: 180px;font-size: 14px;">
    <div class="center_title" style="border-bottom: 1px solid #000">080084</div>
    <div style="display: flex; flex-direction: column; margin-top: 30px">
      <div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
        <div class="center_body_item_left">定位时间</div>
        <div class="center_body_item_right">电池电量</div>
      </div>
      <div style="display: flex;justify-content: space-between;padding: 0 20px; align-items: center; line-height: 20px;">
        <div class="center_body_item_left">电池时间</div>
        <div class="center_body_item_right">车辆状态</div>
      </div>
      <div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
        <div class="center_body_item_left">续航里程</div>
        <div class="center_body_item_right">通电状态</div>
      </div>
      <div style="display: flex;justify-content: space-between;padding: 0 20px;align-items: center;line-height: 20px;">
        <div class="center_body_item_left">地址描述</div>
        <div class="center_body_item_right"></div>
      </div>
    </div>
    <div style="margin-top: 20px;display: flex;justify-content: space-around;align-items: center;">
      <div class="center_btn_x" onclick="getLen()">寻车</div>
      <div class="center_btn_q">启动</div>
      <div class="center_btn_adds">加锁</div>
      <div class="center_btn_deles">解锁</div>
    </div>
  </div>
        `;
        marker.on("click", markerClick);
        marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }

      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
       //函数内的事件
      window.getLen = ()=>{
        console.log('点击了')
      }
    },
    
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
}
.center {
}
.center_body {
}
.center_body_item {
}
.center_btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

下边的样式是使用在内部的,写在外边的没办法修改内部样式,所以使用的是行内样式

 

效果:

 


版权声明:本文为qq_42876444原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。