谷歌地圖的getBounds（）返回undefined

Question

我正在寫的代碼將：

- 加載地圖，並居中在KML

- 基於繪製在地圖上的邊界多邊形。

下面的代碼。我得到一個錯誤

遺漏的類型錯誤：無法調用「getNorthEast」的未定義

function initialize() 
{ 
    var mapOptions = 
    { 
    zoom: 19, 
    mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom 
    }; 

    var KML1 = new google.maps.KmlLayer(
      { 
      clickable: false, 
      url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan 
      }); 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    KML1.setMap(map); 


    var bounds = new google.maps.LatLngBounds(); 
    bounds = map.getBounds(); 
    var ne = bounds.getNorthEast(); 
    var sw = bounds.getSouthWest(); 

    var QLat = Math.abs((ne.lat()-sw.lat())/5); 
    var QLng = Math.abs((sw.lng()-ne.lng())/5); 

    var swLat = sw.lat()+QLat; 
    var swLng = sw.lng()+QLng; 

    var neLat = ne.lat()-QLat; 
    var neLng = ne.lng()-QLng; 

    ne = new google.maps.LatLng(neLat,neLng); 
    sw = new google.maps.LatLng(swLat,swLng); 

    var Coords = [ 
       ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
       sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
      ]; 


    surface = new google.maps.Polygon(
    { 
    paths: Coords, 
    strokeColor: '#00AAFF', 
    strokeOpacity: 0.6, 
    strokeWeight: 2, 
    fillColor: '#00CC66', 
    fillOpacity: 0.15, 
    editable: true, 
    draggable: true, 
    geodesic:true 
    }); 

    surface.setMap(map); 
    google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes 
    //$("#results").append(coordinates[0]); 
    //Let's update area and price as the poly changes 
function ciao(event) 
{ 
     var vertices = this.getPath(); 
     // Iterate over the vertices. 
     for (var i =0; i < vertices.getLength(); i++) { 
      var xy = vertices.getAt(i); 
      Coords = [] 
      Coords.push(xy); 
      }; 
} 
} 

什麼建議嗎？

感謝，

丹尼爾

Answer 1

你需要把所有依賴於事件偵聽器內的地圖邊界的代碼。

var surface = null; 
    function initialize() 
    { 
     var mapOptions = 
     { 
      zoom: 19, 
      mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom 
     }; 

     var KML1 = new google.maps.KmlLayer(
      { 
       clickable: false, 
       url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan 
      }); 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     KML1.setMap(map); 

     google.maps.event.addListener(map,'bounds_changed', function() 
     { 
     var bounds = new google.maps.LatLngBounds(); 
     bounds = map.getBounds(); 
     var ne = bounds.getNorthEast(); 
     var sw = bounds.getSouthWest(); 

     var QLat = Math.abs((ne.lat()-sw.lat())/5); 
     var QLng = Math.abs((sw.lng()-ne.lng())/5); 

     var swLat = sw.lat()+QLat; 
     var swLng = sw.lng()+QLng; 

     var neLat = ne.lat()-QLat; 
     var neLng = ne.lng()-QLng; 

     ne = new google.maps.LatLng(neLat,neLng); 
     sw = new google.maps.LatLng(swLat,swLng); 

     var Coords = [ 
       ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
       sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
      ]; 


     surface = new google.maps.Polygon(
     { 
      paths: Coords, 
      strokeColor: '#00AAFF', 
      strokeOpacity: 0.6, 
      strokeWeight: 2, 
      fillColor: '#00CC66', 
      fillOpacity: 0.15, 
      editable: true, 
      draggable: true, 
      geodesic:true 
     }); 

     surface.setMap(map); 
    }); // end of listener callbck 

    google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes 
    //$("#results").append(coordinates[0]); 
    //Let's update area and price as the poly changes 
    function ciao(event) 
    { 
     var vertices = this.getPath(); 
     // Iterate over the vertices. 
     for (var i =0; i < vertices.getLength(); i++) { 
     var xy = vertices.getAt(i); 
     Coords = [] 
     Coords.push(xy); 
     }; 
    } 

    } // end of initialize