谷歌地图 getBounds() 返回未定义 [英] Google Maps getBounds() returns undefined

问题描述

我正在编写一个代码，它将:

I'm writing a code which will:

-- 加载地图并将其以 KML 为中心

-- Load a map and center it on a KML

-- 根据地图的边界绘制多边形.

-- Draw a polygon based on the bounds of the map.

下面是代码.我收到一个错误

Here below the code. I get an error

未捕获的类型错误:无法调用未定义的方法getNorthEast"

Uncaught TypeError: Cannot call method 'getNorthEast' of undefined

    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);  
            };
}
}

有什么建议吗?

谢谢，

丹尼尔

推荐答案

您需要将所有依赖于地图边界的代码放在事件侦听器中.

You need to put all the code that depends on the map bounds inside the event listener.

    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

这篇关于谷歌地图 getBounds() 返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！