2016-04-13 4 views
0

Ich benutze Google Maps API 3 (JS) und alles funktioniert ... Art von, Es gibt ein bedeutendes Problem, das mich davon abhält, dies zu veröffentlichen. Die Karte wird geladen und wie erwartet auf der Seite angezeigt. Alle Bilder, der Zoom steuert das Google-Logo in der unteren linken Ecke und die Push-Pin-Bilder werden nicht jedes Mal für 2 Minuten geladen, wenn die Seite geladen wird. Ich habe die Seite in Chrome-Dev-Tools geladen und die gesamte Seite geladen, dann sitzt für 2 Minuten, dann die restlichen 7 Bilder laden aus heiterem Himmel nach 2 Minuten mit keinem anderen Element in der Liste zeigt, dass es hätte stocken oder gewesen sein Blockieren der Anfragen Ich bekomme die gleichen Ergebnisse von PC Android-Handys etc. mit Internet Explorer und Chrome Web-Browsern. Ich habe das auch von unserem privaten Netzwerk sowie anderen Netzwerken (persönlich und öffentlich) getestet. Bitte helfen Sie. Danke im Voraus!Google Map JS API - Kartenkacheln laden, aber alle Bilder (Markierungen, Zoomsteuerung usw.) laden nicht für 2 Minuten

Hier einige meiner Code:

api Skript in Seitenkopf generieren:

// Setup google maps JS file 
var script = document.createElement('script'); 
var asyncAttr = document.createAttribute('async'); 
var deferAttr = document.createAttribute('defer'); 
script.setAttributeNode(asyncAttr); 
script.setAttributeNode(deferAttr); 
script.setAttribute('type', 'text/javascript'); 
script.src = _googleMapJsPath; 
document.getElementsByTagName("head")[0].appendChild(script); 

Welche (keinen Schlüssel für localhost - Schlüssel vorhanden auf dem Server) erzeugt:

<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 

Dann verwende ich den Rückruf nicht in der Abfragezeichenfolge, da ich warten muss, um die Karte einzurichten, bis sie benötigt wird. Stattdessen wird die Karte bei Bedarf initialisiert:

self.currentMap = new google.maps.Map(self.element, { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    scrollwheel: false 
}); 

Set-Marker:

$.each(newMap.points, function (index, item) { 
    if (item.latitude != 0 && item.longitude != 0) { 
     var marker = new google.maps.Marker({ 
      position: {lat: item.latitude, lng: item.longitude}, 
      map: self.currentMap, 
      optimized: false 
     }); 

     self.markers.push(marker); 
    } 
}); 

Hier ist das HTML-Element:

<div id="mapDiv" class="map-container"></div> 

Hier ist die CSS für die Klasse auf dem DIV:

.map-container { 
    width: 580px; 
    height: 580px; 
} 
+0

Haben Sie versucht, die Anzahl der geladenen Marker/Bilder zu verringern? Sehen Sie, ob es auch die Zeit verringert, die es braucht, um sie zu laden? –

+0

Dies ist mit nur einem einzigen Punkt/Marker gerendert. – Kyle

Antwort

0

Ist das passiert? g nur auf Ihrem Computer oder mehreren Geräten, Browsern? Es wird eine seltsame Antwort sein, aber ich habe Firebug deaktiviert und es hat gut für mich funktioniert, wenn Sie Firebug hat. Auch da ich Ihren Code nicht sehe, wo haben Sie Ihre JScript-Dateien oben oder unten? Das kann die Prioritäten ändern. Ich rate nur nach dem, was Sie bisher geliefert haben.

+0

Dies geschieht von jedem Gerät, das ich getestet habe (PC-Telefone usw.). Ich benutze keinen Firebug. Das Google API-Skript befindet sich oben auf der Seite im Kopf und mein Code, der die Karte implementiert, befindet sich unten. Ich verwende keinen Rückruf in der API-Abfrage-Zeichenfolge, da ich die Karte bei Bedarf nicht die ganze Zeit und beim Laden laden muss. – Kyle

+0

Codebeispiele hinzugefügt, siehe oben bearbeitete Frage. – Kyle

0

Wir haben herausgefunden, dass dieses Problem spezifisch für unser benutzerdefiniertes JS-Framework ist, das für diese Anwendung verwendet wird. Die Karten funktionieren wie erwartet auf 2 von 3 Seiten. Wir müssen nur das Auflegen Problem auf der 1 Problemseite korrigieren. Danke euch allen!

Verwandte Themen