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;
}
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? –
Dies ist mit nur einem einzigen Punkt/Marker gerendert. – Kyle