Question

我正在使用Google Maps Javascript API v3开发Cordova应用程序，用户可以选择设置“感兴趣的区域”。感兴趣的区域应该由多边形或实际上由矩形可视化。我认为使用"getBounds" method是最容易的，但不幸的是，这给了我LatLngBounds，这对于矩形来说很难用，因为我必须手工构建矩形。据我所知，一个矩形包含五个点的情况......

还有其他智能（呃）方式吗？
提前谢谢！

Answer 1

示例：

function setBounds() {
    if (rectangle && rectangle.setBounds) {
        rectangle.setBounds(map.getBounds());
    } else {
      rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: map.getBounds()
      });    
    }
}

proof of concept fiddle

代码段

var rectangle;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 33.678,
      lng: -116.243
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  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.671, -116.251),
      new google.maps.LatLng(33.685, -116.234))
  });
}

function setBounds() {
  if (rectangle && rectangle.setBounds) {
    rectangle.setBounds(map.getBounds());
  } else {
    rectangle = new google.maps.Rectangle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="set bounds" onclick="setBounds();" />
<div id="map"></div>

使用Google Maps v3创建地图范围的矩形

1 个答案: