зацикливание карты Google и отображение каждого местоположения на другой карте, VUE JS

Question

Я пытаюсь зациклить карту Google и отобразить каждое местоположение на другой карте.Но, по-моему, я не мог зациклить карту.и единственное местоположение, которое отображается, - это адрес последнего элемента в массиве.

Сначала я зацикливаю api.data в родительском элементе и отправляю его потомку ...

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

, затем в потомкеЯ установил карту Google в 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>

Answer 1

Все ваши компоненты рисуют в один и тот же элемент DOM, один с идентификатором «listMaps», поэтому они перезаписывают друг друга:

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

Вместо этого вам нужно, чтобы каждый компонент рисовался в своем собственном шаблоне.Вы можете использовать разные идентификаторы для каждого из них и таким образом передавать их на карты Google, но было бы проще использовать компонент $ ref:

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

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

Таким образом, каждый компонент проходит свой собственный элемент DOMна Google Maps, вместо того, чтобы все они сражались за один и тот же элемент.