谷歌地圖 - 將地區劃分成相等部分，並僅顯示地圖上的點擊區域

Question

以下是將地圖劃分爲相同區域的代碼示例。當點擊矩形中心的標記時，如何才能在Google地圖上顯示特定的矩形區域？點擊標記後，所有其他區域都不應該位於地圖中。

function initialize() {  
var myLatlng;  
var mapOptions; 

myLatlng = new google.maps.LatLng(29.98439980, -95.34140015); 

    mapOptions = { 
     zoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(
     document.getElementById("map-canvas"), mapOptions); 

    google.maps.event.addListenerOnce(map, 'idle', function() { 
     drawRectangle(map); 
    }); 

    function drawRectangle(map) { 
     var bounds = map.getBounds(); 
     var southWest = bounds.getSouthWest(); 
     var northEast = bounds.getNorthEast(); 

     var numberOfParts = 4; 

     var tileWidth = (northEast.lng() - southWest.lng())/numberOfParts; 
     var tileHeight = (northEast.lat() - southWest.lat())/numberOfParts; 
     for (var x = 0; x < numberOfParts; x++) { 
     for (var y = 0; y < numberOfParts; y++) { 
      var areaBounds = { 
      north: southWest.lat() + (tileHeight * (y+1)), 
      south: southWest.lat() + (tileHeight * y), 
      east: southWest.lng() + (tileWidth * (x+1)), 
      west: southWest.lng() + (tileWidth * x) 
      }; 

      var area = new google.maps.Rectangle({ 
      strokeColor: '#FF0000', 
      //strokeOpacity: 0.8, 
      strokeWeight: 2, 
      //fillColor: '#FF0000', 
      //fillOpacity: 0.35, 
      map: map, 
      bounds: areaBounds 
      }); 
      var centerMark = new google.maps.Marker({ 
      position: area.getBounds().getCenter(), 
      map: map, 
      title: area.getBounds().getCenter().toUrlValue(6) 
      }); 
     } 
     } 
    } 
    } 

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

我已經嘗試使用地圖邊界代碼，但它不像預期的那樣工作。它只適用於我增加縮放。但是縮放對於每個區域可能不同。

var bounds = new google.maps.LatLngBounds(); 
    bounds.extend(southLatitude, eastLongitude); 
    bounds.extend(northLatitude, westLongitude); 
    map.fitBounds(bounds); 

Answer 1

可以添加的每個矩形的邊界爲中心標記的屬性，然後使用map.fitBounds居中和縮放地圖的矩形區域：

google.maps.event.addListener(centerMark, 'click', function(evt) { 
    // center and zoom the map to completely show the area 
    map.fitBounds(this.area); 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    // increase the zoom by one level to remove the padding. 
    map.setZoom(map.getZoom()+1); 
    }) 
}); 

proof of concept fiddle

代碼片段：

function initialize() { 
 
    var myLatlng; 
 
    var mapOptions; 
 

 
    myLatlng = new google.maps.LatLng(29.98439980, -95.34140015); 
 

 
    mapOptions = { 
 
    zoom: 10, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(
 
    document.getElementById("map-canvas"), mapOptions); 
 

 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 
    drawRectangle(map); 
 
    }); 
 

 
    function drawRectangle(map) { 
 
    var bounds = map.getBounds(); 
 
    var southWest = bounds.getSouthWest(); 
 
    var northEast = bounds.getNorthEast(); 
 

 
    var numberOfParts = 4; 
 

 
    var tileWidth = (northEast.lng() - southWest.lng())/numberOfParts; 
 
    var tileHeight = (northEast.lat() - southWest.lat())/numberOfParts; 
 
    for (var x = 0; x < numberOfParts; x++) { 
 
     for (var y = 0; y < numberOfParts; y++) { 
 
     var areaBounds = { 
 
      north: southWest.lat() + (tileHeight * (y + 1)), 
 
      south: southWest.lat() + (tileHeight * y), 
 
      east: southWest.lng() + (tileWidth * (x + 1)), 
 
      west: southWest.lng() + (tileWidth * x) 
 
     }; 
 

 
     var area = new google.maps.Rectangle({ 
 
      strokeColor: '#FF0000', 
 
      //strokeOpacity: 0.8, 
 
      strokeWeight: 2, 
 
      //fillColor: '#FF0000', 
 
      //fillOpacity: 0.35, 
 
      map: map, 
 
      bounds: areaBounds 
 
     }); 
 
     var centerMark = new google.maps.Marker({ 
 
      position: area.getBounds().getCenter(), 
 
      map: map, 
 
      area: areaBounds, 
 
      title: area.getBounds().getCenter().toUrlValue(6) 
 
     }); 
 
     google.maps.event.addListener(centerMark, 'click', function(evt) { 
 
      map.fitBounds(this.area); 
 
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
      map.setZoom(map.getZoom() + 1); 
 
      }); 
 

 
     }); 
 
     } 
 
    } 
 
    } 
 
} 
 

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

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>