前端vue如何在高德上定义多个marker并能让他们同时展示

Question

问题遇到的现象和发生背景 需要在高德定义多个marker可以同时显示，目前只能显示一个

用代码块功能插入代码，请勿粘贴截图

  initMap() {
      //初始化地图
      AMapLoader.load({
        key: '4e6ba029956ccb2e22f28fb782008a94',
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map('container', {
            viewMode: '3D',
            zoom: 22,
            plugins: [''],
            center: this.firstArr, //[119.980915962, 30.520096745]
            resizeEnable: true,
          })
        
          // 自定义图标
            var IconImg = new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(80, 40),
              // 图标的取图地址
              image: require('../assets/icon_btk41kc4q9m/Bus.png'),
              // 图标所用图片大小
              imageSize: new AMap.Size(40, 20),
              // imageSize: new AMap.Size(80, 40),
              // 图标取图偏移量
              // imageOffset: new AMap.Pixel(-9, -3)
            })
            this.marker = new AMap.Marker({
              map: this.map,
              // position: this.pereptionInfoList.map(item => [item.longitude,item.latitude])[0],
              position: [119.980915962, 30.520096745],
              // position: new AMap.LngLat(119.980915962, 30.520096745),
              icon: IconImg,
              offset: new AMap.Pixel(-35, -15), //调整图片偏移
              // offset: new AMap.Pixel(-56, -30), //调整图片偏移
              // autoRotation: true, //自动旋转
              // angle: -90 //图片旋转角度
            })
          
        })
        .catch((e) => {
          console.log(e)
        })
    },

Answer 1

data为经纬度组成的二维数组,遍历生成marker集合添加到this.markers数组里，然后一起加到地图上[也可单个加，放在循环内this.map.add(marker)]

this.markers = [];
data.forEah((item)=>{
let marker = new AMap.Marker({
    position: new AMap.LngLat(item),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.markers.push(marker );
// 将创建的点标记添加到已有的地图实例：

})
this.map.add(this.markers);