Nuxt js：Google 地图标记不会显示并且循环不起作用

Question

我有一个循环遍历对象以填充标记的函数。但是当我执行 运行 代码时，循环不起作用。此外，当我执行 console.log 时，即使在 Vue DevTools 中也没有显示任何内容。我没有为 Google 地图使用任何 Vue 包。我只是按照文档，编写了香草 JavaScript 函数。

这是整个函数：

export default {
    layout:'adminLte',
    data(){
        return{
            address:{
                lat:7.0650673,
                lng:125.5961476
            },
            clinic:[],
            markersInfo:[],
        }
    },
    methods:{
        loadScript() {
            if (window.google && window.google.maps) {
                this.initMap();
                return;
            }
            var self = this;
            var script = document.createElement("script");
            script.onload = function() {
                if (!window.google && !window.google.maps)
                    return void(console.error("no google maps script included"));
                self.initMap();
            };
            script.async = true;
            script.defer = true;
            script.src = "https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=geometry";
            document.getElementsByTagName("head")[0].appendChild(script);
        },
        initMap(){

            var center = new google.maps.LatLng(this.address.lat, this.address.lng)
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: center
            })
    
            //this are for the markers. even if i console log below. it wont show anything
            for (var i = 0; i < this.clinic.length; i++) {
                var clinicLat = this.clinic.data[i].lat;
                var clinicLng = this.clinic.data[i].lng;
                var details = this.clinic.data[i].name;
                var latLng = new google.maps.LatLng(clinicLat,clinicLng);
                console.log(details)
                var markers = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    icon: {
                        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
                    },
                    size: new google.maps.Size(20, 20),
                });
                const contentString = '<div id="content"><p>' + details + '</p></div>';
                //for Info windows function
                console.log('Markers' + markers)
                this.infoWindowShow(markers, contentString);
                this.markersInfo.push(markers)
            }
      
        },
        infoWindowShow(markers, contentString) {
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            markers.addListener('click', function() {
                infowindow.open(markers.get('map'), markers);
            });
        },
        showMarker(id) {
            google.maps.event.trigger(this.markersInfo[id], 'click');
        },
        getClinicsList(){
              firebase.database().ref('clinics').on('value',(snapshot)=>{
                this.clinic = snapshot.val()
                console.log(snapshot.val())
                this.loadScript()
            })
        },
    },
    created(){
        console.log('created')
        this.getClinicsList()
 
        if (localStorage.getItem("user-email") === null) {
         this.$router.push('/login')
        }
    },
    mounted(){
        this.loadScript()
    }
}

地图的 HTML 元素：

<div class="card-body table-responsive">
  <div id="map" style="width: 1200px; height: 600px;"></div>
</div>

DevTools 仍然是空的，但是 clinic 数组有值。

JSFiddle

Answer 1

甚至在创建地图标记之前，for-循环遇到运行时错误，这是由您的代码中的几个问题引起的。

问题 1：clinic 不是 Array

如屏幕截图所示，clinic 实际上设置为 Object:

for 循环假定 clinic 是一个 Array，并使用数字索引进行迭代，但这对您的 Object 无法正常工作。一种解决方案是使用 Object.values() 进行迭代，如下所示：

// BEFORE:
// for (var i = 0; i < this.clinic.length; i++) {

for (const item of Object.values(this.clinic)) {

问题 2：item.data 不存在

您的循环试图访问每个 clinic 项（即 var clinicLat = this.clinic.data[i].lat）中不存在的 data 属性，但是 lat 和 lng道具实际上位于对象的根部，如屏幕截图所示：

因此您可以直接从项目参考中访问道具。使用上面更正的 for 循环：

// BEFORE:
// for (var i = 0; i < this.clinic.length; i++) {
//   var clinicLat = this.clinic.data[i].lat;
//   var clinicLng = this.clinic.data[i].lng;
//   //...
// }

for (const item of Object.values(this.clinic)) {
  const clinicLat = item.lat
  const clinicLng = item.lng
  //...
}

Working JSFiddle with changes above