Google Maps getBounds（）返回未定义 [英] Google Maps getBounds() returns undefined

问题描述

我正在写一段代码：

- 加载地图并将其置于KML上

- 根据地图的边界绘制一个多边形。

下面的代码。我得到一个错误

未捕获TypeError：无法调用未定义的方法'getNorthEast'

  b 
 mapTypeId：google.maps.MapTypeId.ROADMAP // higer zoom 
}; 
 
 var KML1 =新的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，
可编辑：true，
可拖曳：true，
 geodesic：true 
}）; 
 
 surface.setMap（map）; 
 google.maps.event.addListener（surface，'mousemove'，ciao）//添加监听器以进行更改
 //$(\"#results\").append(coordinates[0]）; 
 //让我们更新区域和价格作为多元变化
函数ciao（event）
 {
 var vertices = this.getPath（）; 
 //遍历顶点。 （var i = 0; i< vertices.getLength（）; i ++）{
 var xy = vertices.getAt（i）; 
 Coords = [] 
 Coords.push（xy）; 
}; 
} 
} 
  

任何建议？

谢谢，

Daniele

解决方案

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

  var surface = null; 
函数initialize（）
 {
 var mapOptions = 
 {
 zoom：19，
 mapTypeId：google.maps.MapTypeId.ROADMAP // higer zoom 
}; 
 
 var KML1 =新的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，新的google.maps.LatLng（ne.lat（），sw.lng（）），
 sw，新的google.maps .LatLng（sw.lat（），ne.lng（）），ne 
]; 
 
 
 surface = new google.maps.Polygon（
 {
路径：坐标，
 strokeColor：'＃00AAFF'，
 strokeOpacity：0.6，
 strokeWeight：2，
 fillColor：'＃00CC66'，
 fillOpacity：0.15，
 editable：true， 
 draggable：true，
 geodesic：true 
}）; 
 
 surface.setMap（map）; 
}）; //结束侦听器callbck 
 
 google.maps.event.addListener（surface，'mousemove'，ciao）//为侦听器添加更改
 // $（＃results）。追加（坐标[0]）; 
 //让我们更新区域和价格作为多元变化
函数ciao（event）
 {
 var vertices = this.getPath（）; 
 //遍历顶点。 （var i = 0; i< vertices.getLength（）; i ++）{
 var xy = vertices.getAt（i）; 
 Coords = [] 
 Coords.push（xy）; 
}; 
} 
 
} //初始化结束
  

I'm writing a code which will:

-- 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

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

Any Suggestion?

Thanks,

Daniele

解决方案

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

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