循环谷歌地图并在不同的地图中显示每个位置，VUE JS答案

【问题标题】：looping google map and display each location in a different map, VUE JS循环谷歌地图并在不同的地图中显示每个位置，VUE JS
【发布时间】：2019-09-18 18:18:34
【问题描述】：

我正在尝试循环谷歌地图并在不同的地图中显示每个位置。但以我的方式，我无法循环地图。唯一显示的位置是数组中最后一项的地址。

首先我在父级循环api.data并将其发送给子级...

<div class="" v-for="item in api">
    <app-list :item="item" v-on:updateList="api = $event" />
</div>

然后在孩子的时候，我将谷歌地图设置为method。

mounted() {
    this.initMap();
},
initMap: function(){
    var lat = parseFloat(this.item.lat);
    var lng = parseFloat(this.item.lng);

    var map = new google.maps.Map(this.$refs.mapContainer), {
        zoom: 14,
        center: {lat:lat, lng:lng}
    });

    this.markers = new google.maps.Marker({
        position: {lat:lat, lng:lng},
        map: map,
    });
},

并将地图画布放在子组件的循环中。

<transition  name="mapSlide">
     <div id="mapContent" v-show="openBox">
         <div id="listMaps" ref="mapContainer"></div>
     </div>
</transition>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您的所有组件都在绘制到同一个 DOM 元素，即 ID 为“listMaps”的元素，因此它们会相互覆盖：

var map = new google.maps.Map(document.getElementById("listMaps"), {...}

相反，您需要将每个组件绘制到自己的模板中。您可以为每个 ID 使用不同的 ID，并以这种方式将其传递给谷歌地图，但使用组件 $ref 会更简单：

 <div id="mapContent" v-show="openBox">
      <div ref="mapContainer></div>
 </div>

var map = new google.maps.Map(this.$refs.mapContainer), {...}

这样每个组件都将自己的 DOM 元素传递到谷歌地图，而不是所有组件都争夺同一个元素。

【讨论】：