vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件

转载 2023-05-23 15:09:05 1.3w 阅读 AI写同款

收录于

element项目问题

Start2019

码龄7年墨衍会员 · AI 创作全网分发

2345粉丝55篇原创

关注

uniapp h5 高德地图基本的使用（给点标记绑定事件，信息窗体的使用 uniapp h5 高德地图基本的使用（给点标记绑定事件，信息窗体的使用）阅读详情

AI摘要

本文详细介绍了如何在Vue项目中引入并使用高德地图，展示如何处理海量点标注，根据在线状态显示不同颜色的点，并实现点击标注点弹出信息窗口，窗口内绑定点击事件进行详情跳转。主要步骤包括地图引入、API熟悉、信息窗口和标记的创建以及事件处理。

一、需求

二、引入高德地图

2.1、将高德地图引入到项目中

2.2、查看官网快速上手，熟悉高德地图的主要API

2.3、海量点标注要用到的API文档

2.4、全部代码

其他：

一、需求

因为不知道具体会有多少个点，那就直接以海量点安排，海量点也是有限制的，建议在 30000 点内。

文档：标注和标注图层-海量点-海量点标记-示例中心-JS API 2.0 示例 | 高德地图API

需求：后台给多个经纬度，都要在地图上显示成标注点，且根据 online 的值，online=0 时标注点为灰色点，online=1为红色点。点击标注点有内容弹框，弹框中绑定点击事件，点击 “查看详情” 可以进行跳转。实现如下图：

二、引入高德地图

2.1、将高德地图引入到项目中

vue中引入并使用高德地图_会隐身的小圆子的博客-优快云博客_vue 高德地图一、使用npm引入高德地图1.进入高德开放平台2.点击：开发支持---------地图JS AP---------JSAPI的加载3.选择按NPM方式使用loader4.定义一个有宽高的div二、小试牛刀----修改鼠标样式1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式右侧有示例代码下图是自己写的代码，需要注意几点（1）官方代码绑定的click事件传递的this 指当前点击元素，但是vue是没有的，在这里可以不传参，也https://blog.youkuaiyun.com/weixin_61032994/article/details/123984929https://blog.youkuaiyun.com/weixin_61032994/article/details/123984929

先参者上面这篇博客，注册应用的过程就不在这里重复了，第一步是把自己的地图在页面上显示出来，其他的慢慢来。

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
        map:null
    };
  },
  mounted() {
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      map = new AMap.Map("container");
    }).catch((e) => {
      console.log(e);
    });
  },
};
</script>
<style>
#container { width: 800px; height: 400px; }
</style>

2.2、查看官网快速上手，熟悉高德地图的主要API

快速上手-入门-教程-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/guide/abc/quickstart

2.3、海量点标注要用到的API文档

1. 在 2.1 中写出地图的基础上，设置一些假数据模拟海量点，参考以下文档，实现海量点标记。

标注和标注图层-海量点-海量点标记-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/labelmarker-mass 2. 在海量点标记上给点添加信息窗口给多个点添加信息窗体-信息窗体-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/infowindow/add-infowindows-to-multiple-markers

Vue高德地图自定义信息窗内绑定点击事件_鱼趴的博客-优快云博客_高德地图的信息窗加点击事件因为信息窗肯定是在生成标记后点击触发的事件，所以在 methods 中直接定义点击生成标记事件，不过多赘述，本文主要解决点击标记弹出的信息窗内的点击事件绑定问题这是高德官方文档中自定义窗口数据的添加方式，看起来太麻烦且不好对代码进行操作content = [];content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公._1671465600https://blog.youkuaiyun.com/tr1098891979/article/details/122066021

3. 查看 API 手册，细化自己要使用到的功能覆盖物-参考手册-地图 JS API | 高德地图API高德开放平台官网https://lbs.amap.com/api/javascript-api/reference/overlay

2.4、全部代码

<template>
  <div id="container" v-loading="loading" element-loading-text="数据量较大，正在为您加载......" 
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data(){
    return{
      loading: true,
      map:null,
      infoWindow: null, //信息窗口
      positionData: []
    } 
  },
  methods:{
    initMap(){
      var _this = this;
      // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
        AMapLoader.load({
            key: "您的Key值",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.LineSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            _this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5.8,           //初始化地图级别
                expandZoomRange: true, //支持可以扩展最大缩放级别
                center:['116.441504', '40.031386'], //初始化地图中心点位置
                // pitch: 30, //俯仰角度 2D地图下无效,自V1.4.0开始支持
                mapStyle: 'amap://styles/normal' //地图样式，彩色
            });
            _this.map.on('complete',()=>{  
              _this.$axios.post("接口获取经纬度，处理数据",{}).then(res=>{
                if(res.state == 200 && res.data.length){
                  //处理后台返回要用到的数据
                    _this.positionData = res.data.map(item=>({
                      "deviceMarkId": item.deviceMarkId, "sn": item.sn, "address": item.address,
                      "onlineImg": item.online? "online.png":"offline.png",
                      "positionArr": [item.longitude,item.latitude]
                    }));
                    _this.mapPoint();
                    
                } else {
                  _this.loading = false;
                }
              });
            })
            //放大/缩小的工具条----地图右下角的 + 和 - 按钮
            _this.map.plugin(["AMap.ToolBar"], function() {
              _this.map.addControl(new AMap.ToolBar());
            });
            if(location.href.indexOf('&guide=1')!==-1){
              _this.map.setStatus({scrollWheel:false})
            }
        }).catch(e=>{
            console.log(e);
        })
    },
    mapPoint(){
      var _this = this;
      /* 1.创建 LabelMarker，
      2.创建 LabelsLayer，将已创建的 LabelMarker 添加到 LabelsLayer 上
      3. 将 LabelsLayer 添加到地图实例 */
      var labelsLayer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          // 该层内标注是否避让
          collision: true,
          // 设置 allowCollision：true，可以让标注避让用户的标注
          allowCollision: true,
      });
      //将 LabelsLayer 添加到地图实例
      _this.map.add(labelsLayer);
      

      _this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -4)});//信息窗口
      var position = JSON.parse(JSON.stringify(_this.positionData));
      for(var i = 0; i < position.length; i++){
        var labelMarker = new AMap.LabelMarker({
            position: position[i].positionArr
        });
        
        //标注信息
        var normalMarker = new AMap.Marker({ 
          position: position[i].positionArr, 
          map: _this.map,
          icon: require("@/assets/imgs/icons/"+ position[i].onlineImg)
        });
        normalMarker.content = '<p><b>序号1：</b>'+position[i].deviceMarkId+'</p>'+
                              '<p><b>序号2：</b>'+position[i].sn+'</p>'+
                              '<p><b>地址：</b>'+position[i].address+'</p>'+
                              '<strong style="color:#090;cursor:pointer;" onclick="handleDetail(\''+position[i].deviceMarkId+'\')">查看详情</strong>'
        normalMarker.on('click', _this.markerClick);
        normalMarker.setExtData({deviceMarkId: position[i].deviceMarkId}); //给标注添加信息，点击时可以获取
      }
      // 一次性将海量点添加到图层
      labelsLayer.add(labelMarker);
      this.loading = false; //地图加载完成
    },
    markerClick(e) {
      //这个只是标注的点击事件
        // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
        this.infoWindow.setContent(e.target.content);
        this.infoWindow.open(this.map, e.target.getPosition());
    }
  },
  created(){
    //标注文字上的点击事件
    window.handleDetail = (deviceMarkId)=>{
        this.$router.push({path:"/device/nowMonitor", query:{deviceMarkId}})
      }
  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  destroyed(){
    // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
    this.map.destroy( );
  }
}
</script>

<style lang="scss" scoped>
#container{ padding:0px; margin: 0px; width: 100%; height: calc(100vh - 180px); }
</style>