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

Question

出于某种原因，我无法看到 google 地图标记，这些标记应该在遍历标记数组后根据对象放置。如果我要创建第二个组件并对位置进行硬编码，则会出现标记。检查使用循环创建的组件后，我意识到它们的位置设置为未定义，即使我将其设置为 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"

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

My loop creates google map markers but it fails to set their position correctly so they do not get displayed. Hard coding the position works

javascript

vue.js

vuejs2

vue2-google-maps