谷歌地圖API只在屏幕上顯示的地圖調整

Question

我在與谷歌地圖API的一個問題，在地圖上顯示空白，只有當我調整屏幕尺寸的作品。

我閱讀了關於google.maps.event.trigger(map, 'resize');的所有信息，並嘗試了網絡上的所有內容， ，但不知何故，我無法在代碼上正確使用它以使其正常工作，因此可以獲得快速幫助。 這裏是我的jQuery腳本：

var markers3 = []; 
 
    $(document).ready(function() { 
 

 
     var yourStartLatLng = new google.maps.LatLng(35.71083783530009, 51.455841064453125); 
 
     $('#map_canvas3').gmap({'center': yourStartLatLng, zoom: 10}) 
 
      .bind('init', function (event, map) { 
 
       $(map).click(function (event) { 
 

 
        var objectOfCoordinatesInArray = []; 
 
        var a = {}; 
 

 
        var lat = event.latLng.lat(); 
 
        var lng = event.latLng.lng(); 
 

 
        objectOfCoordinatesInArray.push(lat.toString()) 
 
        objectOfCoordinatesInArray.push(lng.toString()) 
 

 
        a["coordinates"] = objectOfCoordinatesInArray; 
 
        a["type"] = "Point"; 
 
        eJSON = JSON.stringify({ 
 
          Point: a 
 
         } 
 
        ); 
 
        console.log(eJSON) 
 
        center: yourStartLatLng; 
 
       }); 
 

 

 
       google.maps.event.addListener(map, 'click', function (event) { 
 
        clearMarkers() 
 
        placeMarker(event.latLng); 
 
       }); 
 

 
       function clearMarkers() { 
 
        setMapOnAll(null); 
 
        markers3 = []; 
 
       } 
 

 
       function setMapOnAll(map) { 
 
        for (var i = 0; i < markers3.length; i++) { 
 
         markers3[i].setMap(map); 
 
        } 
 
       } 
 

 

 

 

 
       function placeMarker(location) { 
 

 
        var marker = new google.maps.Marker({ 
 
         position: location, 
 
         map: map 
 
        }); 
 

 
        markers3.push(marker); 
 

 
       } 
 
      }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

P.S不介意的標誌物分開其JSON。

Answer 1

您提供的樣本是不完整的，我們不能只是複製您的問題。

但是你的問題可能來自於你如何初始化地圖，這是從document.ready。我建議你總是有一個callback參考，當你加入Google Maps的Javascript API腳本，並使其可以像這樣異步調用：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> 

這樣的地圖Javascript加載一次，它會去後馬上做initMap()，而不是與它出現/消失的問題。

你甚至不需要jquery來做你的示例代碼。只是在一個map變量定義google.maps.Map與map.addListener('click', function(e){})添加偵聽它等無需使用jQuery綁定。

看看下面提供的代碼片段，並按照這個方法加載你的地圖。

希望它有幫助。同時也希望，當你提供最小的，完整的，可覈查的例子下一次您可以使用此作爲參考。

var markers3 = []; 
 
var map; 
 
var yourStartLatLng = { 
 
    lat: 35.71083783530009, 
 
    lng: 51.455841064453125 
 
}; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: yourStartLatLng, 
 
    zoom: 10 
 
    }); 
 

 
    map.addListener('click', function(event) { 
 
    var objectOfCoordinatesInArray = []; 
 
    var a = {}; 
 

 
    var lat = event.latLng.lat(); 
 
    var lng = event.latLng.lng(); 
 

 
    objectOfCoordinatesInArray.push(lat.toString()) 
 
    objectOfCoordinatesInArray.push(lng.toString()) 
 

 
    a["coordinates"] = objectOfCoordinatesInArray; 
 
    a["type"] = "Point"; 
 
    eJSON = JSON.stringify({ 
 
     Point: a 
 
    }); 
 
    console.log(eJSON); 
 
    //center: yourStartLatLng; 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    clearMarkers() 
 
    placeMarker(event.latLng); 
 
    }); 
 

 
} 
 

 
function clearMarkers() { 
 
    setMapOnAll(null); 
 
    markers3 = []; 
 
} 
 

 
function setMapOnAll(map) { 
 
    for (var i = 0; i < markers3.length; i++) { 
 
    markers3[i].setMap(map); 
 
    } 
 
} 
 

 
function placeMarker(location) { 
 

 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    map: map 
 
    }); 
 

 
    markers3.push(marker); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&callback=initMap" async defer></script> 
 
<style> 
 
    /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
    
 
    #map { 
 
    height: 100%; 
 
    } 
 
    /* Optional: Makes the sample page fill the window. */ 
 
    
 
    html, 
 
    body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
</style> 
 
<div id="map"></div>