Question

我有几个Lat Long坐标，它指定了一个区域周围的框例如：

LATITUDE 26.664503840000002 29.145674380000003,LONGITUDE -96.27139215 -90.40762858

我正在查看绘制Rectangle的Google地图叠加层。

如果我想为不同的Lat / Long叠加多个矩形，我应该创建新的绑定对象并将其分配给叠加对象吗？

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

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

Answer 2

如果查看linked sample的来源，它实际上提供了界限。

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

Working example with your coordinates

如何覆盖多个矩形

2 个答案: