javascript - 我的循环创建了谷歌地图标记，但它无法正确设置它们的位置，因此它们不会被显示。硬编码位置有效

Question

出于某种原因，在循环遍历标记数组后，我看不到应该根据我的标记数组中的对象放置的谷歌地图标记。如果我要创建第二个组件并对位置进行硬编码，则会出现标记。检查使用循环创建的组件后，我意识到它们的位置设置为未定义，即使我将其设置为 m.position 知道为什么吗？

<template>
    <div class="wrapper">
        <GmapMap
            :center="center"
            :zoom="zoom"
            :map-type-id="map"
            style="width: 100%; height: 850px"
        >
        <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        />
        </GmapMap>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                images: [],
                markers: [{lat: 42.150527, lng: 24.746477}, {lat: 42.160527, lng: 24.796477}],
                center: {lat: 42.150527, lng: 24.746477},
                zoom: 15,
                map: 'roadmap'
            }
        }
    }
</script>

使用以下代码对 GmapMarker 进行硬编码后，它会显示出来。

<GmapMarker
    :position="{lat: 42.150527, lng: 24.746477}"
    :clickable="true"
    :draggable="true"
    @click="center={lat: 42.150527, lng: 24.746477}"
/>

Answer 1

在您的 v-for 循环中，m 是 {lat: ..., lng: ...} 对象。

这些对象没有position属性所以改变

:position="m.position"
@click="center=m.position"

到

:position="m"
@click="center=m"