vue使用高德地图实现多种点样式海量点渲染及信息显示

1.创建地图

定义所需变量

	data() {
	    return {
	      map: null,
	      styleObjectArr: [],
	      massMarks: null,
	      marker: {},
	      mapData: [],
	    }
  },

创建地图，在mounted中调用创建地图函数

	init() {
      this.map = new AMap.Map("map-box", { //map-box为地图容器
        center: [120.27643, 30.1527],
        resizeEnable: true,
        zoom: 12,
        mapStyle: "amap://styles/darkblue",
      })
    },

2.获取地图坐标信息

async getMapData() {
      let _this = this
      let { data: res } = await _this.$axios.get(
        "/api/...."//获取轨迹坐标信息接口地址
      )
      if (res.code == 1) {
        _this.mapData = res.data
		/*数据结构，可以让后台封装或者直接封装
		data = [{
			lnglat: [116.405285, 39.904989],
			name: '要显示的信息',
			id:1,
			style: 0  // 该数据的样式取值styleObjectArr数组对应的样式索引
		},{
			lnglat: [116.405285, 39.904989],
			name: '要显示的信息',
			id:2,
			style: 1
		} ];*/
        _this.getMassMarks()//创建海量点marker
      } else {
        _this.$message.warning(res.msg)
      }
    },

3.创建海量点标记信息

getMassMarks() {
      let _this = this
      //创建多种类点样式数组
      _this.styleObjectArr = [
        {
          url: require("@/assets/images/base-station.png"), // 本地图标地址引入
          //url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',  // 线上图标地址引入方式
          size: new AMap.Size(20, 30), // 图标大小
          anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
          zIndex: 1,//设置层级，值大的显示在上层
        },
        {
          url: require("@/assets/images/4S-shop.png"), // 图标地址
          size: new AMap.Size(20, 30), // 图标大小
          anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
          zIndex: 2,
        },
      ]
      _this.massMarks = new AMap.MassMarks(_this.mapData, {
        zIndex: 100, // 相对于地图海量点图层叠加的顺序
        zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
        cursor: "pointer",
        style: _this.styleObjectArr, //多种样式对象的数组
      })
      _this.marker = new AMap.Marker({ content: " ", map: _this.map })//创建marker
      //鼠标移上显示信息窗体
      AMap.event.addListener(_this.massMarks, "mouseover", function(e) {
        _this.marker.setPosition(e.data.lnglat)
        _this.marker.setLabel({ content: e.data.name })//设置信息窗体内容
      })
      //鼠标移开隐藏信息窗体
      AMap.event.addListener(_this.massMarks, "mouseout", function(e) {
        _this.marker.setPosition(e.data.lnglat)
        _this.marker.setLabel({ content: "" })//信息窗体内容清空
      })
      // 将 massMarks 添加到地图实例
      _this.massMarks.setMap(_this.map)
    },

大部分代码就是这些了，我也是对照高德官方API边学边做的，还是比较简单的，有什么问题欢迎讨论