Vue.js VueMapbox正在尝试创建多个标记

我正在尝试使用VueMapbox在Vue中创建多个标记。当前地图显示正确，但只有一个标记。我认为我的v-for语句或者forEach语句都有问题。我试图在每个位置上放置一个标记，但只添加了第一个位置

以下是我的vue组件的代码：

<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
  >
    <MglMarker v-for="coordinate in coordinates" :key="coordinate" :coordinates="coordinates">
      <MglPopup>
        <VCard>
          <div>{{ country }}</div>
          <div>{{ cases }}</div>
        </VCard>
      </MglPopup>
    </MglMarker>
  </MglMap>
</template>

<script>
  import Mapbox from "mapbox-gl";
  import { MglMap, MglPopup, MglMarker } from "vue-mapbox"

  export default {
    name: 'Map',

    components: {
      MglMap,
      MglPopup,
      MglMarker,
    },

    data() {
      return {
        accessToken: 'pk.accesstoken...blahblahblah',
        mapStyle: 'mapbox://styles/mapbox/dark-v10',
        coordinates: [],
        country: '',
        cases: 0,
      }
    },

    created() {
      this.mapbox = Mapbox;
      this.getData();
    },

    methods: {
      getData: function () {
        fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations')
          .then(response => response.json())
          .then(data => {
            const locations = data.locations;

            locations.forEach(stat => {
              const country = stat.country;
              this.country = country;
              const cases = stat.latest.confirmed;
              this.cases = cases;
              const coordinates = [stat.coordinates.longitude, stat.coordinates.latitude]
              this.coordinates = coordinates;
            })
          })
      }
    }
  }
</script>

{{国家}
{{案例}
从“Mapbox gl”导入Mapbox；
从“vue映射框”导入{MglMap，MglPopup，MglMarker}
导出默认值{
名称：'地图'，
组成部分：{
MglMap，
MglPopup，
MglMarker，
},
数据（）{
返回{
accessToken:'pk.accessToken…blahblahblah'，
地图样式：'mapbox://styles/mapbox/dark-v10',
座标：[]，
国家：“，
案例：0，
}
},
创建（）{
this.mapbox=mapbox；
这是getData（）；
},
方法：{
getData:函数（）{
取（'https://coronavirus-tracker-api.herokuapp.com/v2/locations')
.then（response=>response.json（））
。然后（数据=>{
const locations=data.locations；
位置。forEach（stat=>{
const country=stat.country；
这个国家=国家；
const cases=stat.latest.confirmed；
本例=例；
常量坐标=[统计坐标.经度，统计坐标.纬度]
这个。坐标=坐标；
})
})
}
}
}

您当前正在对坐标执行

v-for

。它应该在

位置上

如果

位置

没有MglMarker所需的所有道具，请在

forEach

中转换它们，但这就是你在

forEach

中应该做的一切（如果你需要的话）。不要用它来填充

这个国家

，

这个.案例

或

这个.坐标

。您只希望在单击标记时设置这些属性（如果且仅当您有任何功能监听这些Vue实例属性的更改时）

可能有更多的细节需要修复，但如果没有一个新的解决方案，就很难发现它们注意：您需要创建一个具有只读权限的映射框，以使您的示例能够工作

---

总结：将功能从

forEach

移动到名为

showMarker

或

activateMarker

的函数中。每当单击标记时调用该函数，或者，如果需要，在其中一个位置调用该函数，使其成为当前活动的位置。
您的代码现在所做的是：它使所有标记都成为当前活动的标记，因此只有最后一个迭代的标记当前处于活动状态

以下是MglMarker迭代器的外观：

<MglMarker v-for="(l, key) in locations" 
           :key="key"
           :coordinates="l.coordinates"
           @click="activateMarker(l)"
>
  <MglPopup>
    VCard>
      <div>{{ l.country }}</div>
      <div>{{ l.latest.confirmed }}</div>
    </VCard>
  </MglPopup>
</MglMarker>

VCard>
{{l.country}
{{l.latest.confirmed}}

---

在

activateMarker

方法中，您可以发送任何操作，让应用程序的其余部分了解您的选择。或者您可以关闭任何其他打开的弹出窗口，例如（尽管在每个MglPopup上使用

：closeOnClick=“true”

可以更轻松地处理这些弹出窗口）。

首先，非常感谢您抽出时间。我想我明白了，我听从了你的建议，所有的标记都出现了。你的建议是正确的。在你的代码中，我唯一需要更改的是我必须制作的MglMarker

：coordinates=“[l.coordinates.longitude，l.coordinates.latitude]”

。弹出窗口不起作用，但我正在阅读文档，认为我可以从这里处理它。再次感谢您抽出时间。