0

地域の周りにボックスを指定するいくつかの緯度経度座標があります。例:

LATITUDE 26.664503840000002 29.145674380000003,LONGITUDE -96.27139215 -90.40762858

Rectangleを描画する Google マップのオーバーレイを見ていました。

異なる緯度/経度の複数の長方形をオーバーレイしたい場合、新しいバインド オブジェクトを作成し、それをオーバーレイ オブジェクトに割り当てる必要がありますか?

function initialize() {
  var 
  lat   = 29.145674380000003, // Should I calcuate the center or
                              // can I use of the min/max co-ordinates
  lng   = -90.40762858;
  zoom  = 4;
  // Basic
  var MapOptions = {
      zoom: zoom,
      center: new google.maps.LatLng( lat, lng ),
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  var map = new google.maps.Map(document.getElementById("map_canvas"),MapOptions);
  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng( 26.664503840000002, -96.27139215 ),
      new google.maps.LatLng( 29.145674380000003, -90.40762858 )
    );
  var overlay = new google.maps.Rectangle({
      map: map,
      bounds: bounds,
      strokeColor: "red",
      strokeWeight: 1,
    });
}
4

2 に答える 2

4

長方形を動的に追加する方法の例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 11,
          center: new google.maps.LatLng(33.678176, -116.242568),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

    var myBounds = new Array();
    myBounds[0] = new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.685282, -116.233942));

    myBounds[1] = new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.687282, -116.238942));
    myBounds[2] = new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.688282, -116.238942));

    addRects(myBounds, map);
      }
    function addRects(bounds, map){
    for (var i=0; i<bounds.length; ++i) {
      var overlay = new google.maps.Rectangle({
          map: map,
          bounds: bounds[i],
          strokeColor: "red",
          strokeWeight: 1,
        });
    }
    }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

<style>
#map_canvas {
    width: 600px;
    height: 400px;
}
</style>
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>

</html>
于 2013-02-13T16:24:02.083 に答える
1

リンクされたサンプルのソースを見ると、実際に境界が示されています。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 11,
          center: new google.maps.LatLng(33.678176, -116.242568),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var rectangle = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.685282, -116.233942))
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

あなたの座標での作業例

于 2013-02-13T15:57:28.047 に答える