Google maps v3 - Добавление маркеров в центр плиток

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.

Заранее спасибо за помощь.


google-maps google-maps-api-3
person Srini    schedule 12.01.2016    source источник
comment
Вы не можете просто показать значок ... в своем json? проверьте правильность пути..   -  person scaisEdge    schedule 12.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Связанный вопрос: Google maps api v3 - разделить регион на равные части плитками

Проще добавить маркеры в центры прямоугольников при их создании:

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

доказательство концепции скрипки

Чтобы добавить маркеры из ответа на карту (позиции в опубликованном ответе не находятся в центре квадратов), это та же функция, которую вы разместили в своем вопросе, это работает для меня (синие маркеры), я изменил ваш прослушиватель кликов, чтобы открывать информационное окно (вместо перенаправления страницы):

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));
  }
}
person geocodezip    schedule 12.01.2016
comment
Я хотел добавить маркеры, используя массив результатов, который содержит изображение, широту и долготу каждого центра плитки. Я получаю результат из базы данных. Я должен выбрать значок изображения для каждой плитки на основе некоторой бизнес-логики. Не могли бы вы попробовать показать центр и маркер, используя массив результатов? Вы можете использовать другой значок в качестве доказательства концепции в json, который можно показать на карте. Заранее спасибо. - person Srini; 13.01.2016
comment
Предоставьте минимальный, полный, проверенный и удобочитаемый пример, демонстрирующий, что вы пытаетесь сделать. Как массив результатов получает координаты центра? Если вы отправляете координаты центра на сервер, вы должны просто иметь возможность создавать маркеры при выполнении обратного вызова. - person geocodezip; 13.01.2016
comment
Опубликованный код работает для меня, чтобы отображать маркеры, представленные в опубликованных результатах, см. эту скрипту - person geocodezip; 14.01.2016
comment
Спасибо. Извините за задержку. - person Srini; 19.02.2016
comment
Привет, geocodezip. Если я нажму на один из маркеров в разделенной прямоугольной области, как я могу отобразить щелкнутую прямоугольную часть для всего окна просмотра? Я попытался использовать следующий код, но мне пришлось увеличить масштаб до 16. Можно ли показать эту прямоугольную область на полной карте без увеличения масштаба? var bounds = новый google.maps.LatLngBounds(); bounds.extend(32.89131546020508,-97.05835723876953); bounds.extend(32.90044403076172,-97.02222442626953); map.fitBounds (границы); - person Srini; 19.02.2016