Google maps v3 - Add markers at the center of tiles

问题

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

In the above code, I am trying to add markers at the center of each rectangle. But I am not able to add markers. I have hard coded image icon value since I don't have image mentioned in the array.

Thanks in advance for your help.

回答1:

Related question: Google maps api v3 - divide region into equal parts using tiles

Simpler to add the markers to the centers of the rectangles when you create them:

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

proof of concept fiddle

To add the markers from the response to the map (the positions in the posted response are not at the center of the squares), this is the same function you posted in your question, 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));
  }
}

来源：https://stackoverflow.com/questions/34746030/google-maps-v3-add-markers-at-the-center-of-tiles