Google Karte nicht vollständig geladen, wenn ich inspect Element es funktioniert

öffnen

Ich habe eine Google Map auf meiner Website integrieren, aber wenn ich inspect Element Karte öffnen funktioniert und wenn ich Karte zu schließen, wird verschwinden. Bitte lassen Sie mich wissen, was das ProblemGoogle Karte nicht vollständig geladen, wenn ich inspect Element es funktioniert

vor enter image description here

Nach offenen Element inspizieren.

enter image description here

-Code ist hier

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
</head> 

<body> 


    <input type="text" id="latitude" placeholder="latitude"> 
    <input type="text" id="longitude" placeholder="longitude"> 
    <div id="map" style="width:500px; height:500px"></div> 


    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     function initialize() { 
      var $latitude = document.getElementById('latitude'); 
      var $longitude = document.getElementById('longitude'); 
      var latitude = -25.363882; 
      var longitude = 131.044922; 
      var zoom = 7; 

      var LatLng = new google.maps.LatLng(latitude, longitude); 

      var mapOptions = { 
       zoom: zoom, 
       center: LatLng, 
       panControl: false, 
       zoomControl: false, 
       scaleControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      var map = new google.maps.Map(document.getElementById('map'), mapOptions); 


      var marker = new google.maps.Marker({ 
       position: LatLng, 
       map: map, 
       title: 'Drag Me!', 
       draggable: true 
      }); 

      google.maps.event.addListener(marker, 'dragend', function (marker) { 
       var latLng = marker.latLng; 
       $latitude.value = latLng.lat(); 
       $longitude.value = latLng.lng(); 
      }); 


     } 
     initialize(); 
    </script> 

</body> 

</html>

Quelle

2014-05-20 Pritesh Mahajan

Einige Code wäre interessant –

Der hinzugefügte Code ist offensichtlich nicht der Code, der verwendet wurde, um die Karte in den Screenshots –

zu erstellen Rufen Sie nicht nur Ihre 'Initialize' Funktion direkt auf. Fügen Sie einen Ereignis-Listener hinzu, wenn das Fenster geladen wird: 'google.maps.event.addDomListener (window, 'load', initialize);' – duncan

Anruf google.maps.event.trigger(map, "resize"); einmal Karte geladen werden, überprüfen Geige Demo,

DEMO

Quelle

2014-05-20 10:01:49 Rorschach

Um zu erklären, was passiert, wenn man das öffnen Entwicklungswerkzeuge: Die Darstellungsfenstergröße des Fensters ändert sich, das Größenanpassungsereignis des Fensters wird ausgelöst und die Größe der Karte wird neu berechnet. Das gleiche passiert, wenn Sie das Fenster auf andere Weise skalieren.

Bezogen auf die Verwendung von Tabs (http://jsfiddle.net/KhwZS/1300/): Die Karte-tab zunächst verborgen ist (die Kartengröße ist 0x0), das Resize-Ereignis des Fensters ausgelöst werden, wenn die Karte-Register aktiviert wurde (welche die Neuberechnung der Kartengröße) erzwingen:

$(".tabs").tabs({ 
    activate: function(event, ui) {if(ui.newPanel.has('#map-canvas')){ 
     google.maps.event.trigger(window,'resize',{});};} 
});

Demo: http://jsfiddle.net/KhwZS/1476/

Da es noch unklar ist, welcher Code die Karte im Screenshot erstellt meine Antwort lautet: Auslöser das Resize-Ereignis des Fensters oder die Karte, wenn zeigen Sie die Karte

Quelle

2014-05-20 10:35:53

Platzieren Sie diesen Code nach Markierung erstellt oder Karte geladen wird:

google.maps.event.addListenerOnce(map, 'idle', function() { 

    google.maps.event.trigger(map, 'resize'); 

});

idle Ereignis ausgelöst wird, wenn die Karte wird im Leerlauf nach dem Panning oder zoomen.

Wir verwenden resize Methode, nachdem die Karte im Leerlauf bedeutet alle Ladevorgänge abgeschlossen ist. So wartet der Code auf das Map-Idle-Ereignis (wenn die gesamte Verarbeitung auf der Map gestoppt wurde) und führt dann die resize-Methode aus. Dadurch wird die Map auf die korrekten Dimensionen neu gezeichnet.

Quelle

2016-10-21 08:05:23 kumar

Google Karte nicht vollständig geladen, wenn ich inspect Element es funktioniert

Antwort

Verwandte Themen