谷歌地圖v3的 - 在磚

Question

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); 
     var result = {"regionList":[{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578}]}; 
     alert(result); 
     addMarkersAtRegionCenter(map, result); 

    }); 

function addMarkersAtRegionCenter(map, result) { 

    var length = result.regionList.length; 
    var regionUrl = "drilledDownToRegion.jsp?"; 

    for(var i=0; i<length; i++) 
    { 
      var image = result.regionList[i].imageIcon; 
     //alert("Latitude : " + result.regionList[i].centerLatitude); 
      var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(result.regionList[i].centerLatitude,result.regionList[i].centerLongitude), 
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { 
        window.location.href = marker.url; 
       } 
      })(marker, i)); 
    } 
} 
    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 

      }); 

     } 
     } 
    } 
    } 

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

在上面的代碼中心添加標記，我想在每一個矩形的中心添加標記。但我無法添加標記。我有硬編碼的圖像圖標值，因爲我沒有在數組中提到的圖像。

在此先感謝您的幫助。

Answer 1

相關問題：Google maps api v3 - divide region into equal parts using tiles

簡單的標記添加到矩形的中心，當您創建它們：

var centerMark = new google.maps.Marker({ 
    position: area.getBounds().getCenter(), 
    map: map 
}); 

proof of concept fiddle

要從響應地圖添加標記（發佈響應中的位置不在正方形的中心），這與您在問題中發佈的相同功能it works for me (the blue markers), I modified your click listener to open an infowindow (rather than do a redirect of the page)：

function addMarkersAtRegionCenter(map, result) { 
    var length = result.regionList.length; 
    var regionUrl = "drilledDownToRegion.jsp?"; 
    for (var i = 0; i < length; i++) { 
    var image = result.regionList[i].imageIcon; 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(result.regionList[i].centerLatitude, result.regionList[i].centerLongitude), 
     icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', 
     map: map 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     // window.location.href = marker.url; 
     infowindow.setContent("regionList:" + i + "<br>centLat=" + result.regionList[i].centerLatitude + "<br>centLng=" + result.regionList[i].centerLongitude + "<br>imageIcon=" + result.regionList[i].imageIcon + "<br>" + marker.getPosition().toUrlValue(6)); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 
}