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

谷歌地图v3 - 在瓷砖中心添加标记

1 个答案: