Question

我需要在我的地图中找到一个多边形的区域。我寻找了一个 < code> new google. maps. geology. sphellical. complexuteArea 的示例, 但我不能让它发挥作用, 我不知道为什么。

function dibuV(area){
  var i;
  var a = new Array();
  for(i=0; i<area.length; i++){
    var uno = area[i].split(",");
    a[i] = new google.maps.LatLng(uno[0],uno[1]);
  }
  poligon = new google.maps.Polygon({
    paths: a,
    strokeColor: "#22B14C",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#22B14C",  
    fillOpacity: 0.35  
  })  
  poligon.setMap(map);//until here is ok 
  var z = new google.maps.geometry.spherical.computeArea(poligon.getPath());
  alert(z); //this is not working
}

Answer 1

您的代码给您带来的错误: google.maps. geology is un定义

从Google Maps v3 API文档中,几何功能是未默认装入的库的一部分:

The concepts within this document refer to features only available within the google.maps.geometry library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter.

要在页面中装入和使用几何真比子,您需要通知谷歌您将使用几何库, 将其添加到您最初的 Google API 呼叫中, 包括 < code> libraries=geography :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

这将装入几何库, 您的 z 变量将包含一个对象。

带有工作代码的测试页面 :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
    var map;
    function initialize()
    {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById( map_canvas ), myOptions);
    }

    google.maps.event.addDomListener(window,  load , initialize);
    </script>
<script>
function test()
{
var arr = new Array()
arr.push( 51.5001524,-0.1262362 );
arr.push( 52.5001524,-1.1262362 );
arr.push( 53.5001524,-2.1262362 );
arr.push( 54.5001524,-3.1262362 );
dibuV(arr);
}
function dibuV(area)
{
var a = new Array();

for(var i=0; i<area.length; i++)
{
    var uno = area[i].split(",");
    a[i] = new google.maps.LatLng(uno[0],uno[1]);
}

poligon = new google.maps.Polygon({
    paths: a,
    strokeColor: "#22B14C",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#22B14C",   
    fillOpacity: 0.35   
})  

poligon.setMap(map);//until here is ok 
var z = new google.maps.geometry.spherical.computeArea(poligon.getPath());
alert(z); //this is not working
}
</script>
</head>
<body onload="test();">
    <div id="map_canvas"></div>
</body>
</html>

Answer 2

This is not working because you are using "new" for use the computeArea method. Use "google.maps.geometry.spherical.computeArea" without "new". Example:

var z = google.maps.geometry.spherical.computeArea(myPolyline.getPath().getArray());
alert(z);

这行得通。

Answer 3

请看我下面的代码

var z = google.maps.geometry.spherical.computeArea(poligon.getPath());

友情链接