Отображение InfoWindow для кластерных маркеров с одинаковой позицией - PullRequest
Новая
       37

Отображение InfoWindow для кластерных маркеров с одинаковой позицией

0 голосов
/ 16 апреля 2019

Я использую скрипт MarkerClusterer для отображения пинов на карте. Когда пользователь нажимает на значок, он отображает информационное окно. Это прекрасно работает для одиночных контактов.

Существует также несколько выводов с одинаковым расположением, и в соответствии с документацией MarkerClusterer должна быть возможность отображать информационное окно со сводным описанием для всех выводов в этом кластере. Это делается с помощью опции infoOnClick: true и настроек infoOnClickZoom.

Однако, похоже, это не работает должным образом. Он отображает информационное окно, но всегда в одном и том же месте на карте. Даже когда я нажимаю на другой кластер, информационное окно отображается на последнем месте.

Я думаю, что что-то упущено в моем коде.

Я сделал демо, чтобы продемонстрировать проблему: https://jsfiddle.net/JospoDev/htj42kvz/

(по какой-то причине в этом JSFiddle информационное окно для сгруппированного кластера вообще не отображается, но оно работает с оперативным кодом)

Вот код, который я использую: 


var map = null;
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 150)
});

// Draw map and make clusterers
function drawMap() {

  var rows = [
    [
      "Marker 01",
      "Address 01",
      "Description 01",
      "1.746491908970114, 16.92597806453705"
    ],
    [
      "Marker 02",
      "Address 02",
      "Description 02",
      "1.7468350744069, 16.917788091659546"
    ],
    [
      "Marker 03",
      "Address 03",
      "Description 03",
      "1.74514002150984, 16.935933225260244"
    ],
    [
      "Marker 04",
      "Address 04",
      "Description 04",
      "1.74514002150984, 16.935933225260244"
    ],
    [
      "Marker 05",
      "Address 05",
      "Description 05",
      "1.74514002150984, 16.935933225260244"
    ],
        [
      "Marker 06",
      "Address 06",
      "Description 06",
      "1.74514002150984, 16.945933225260244"
    ],
    [
      "Marker 07",
      "Address 07",
      "Description 07",
      "1.74514002150984, 16.945933225260244"
    ],
    [
      "Marker 08",
      "Address 08",
      "Description 08",
      "1.74514002150984, 16.945933225260244"
    ]


  ];

  map.markers = [];
  for (var i in rows) {
    var latlng = rows[i][3];
    var htmlDescription = '';
    var commaPos = latlng.indexOf(',');
    var coordinatesLat = parseFloat(latlng.substring(0, commaPos));
    var coordinatesLong = parseFloat(latlng.substring(commaPos + 1, latlng.length));
    // Postition
    var markerpos = new google.maps.LatLng(coordinatesLat, coordinatesLong);
    // Description
    htmlDescription = '<strong>' + rows[i][0] + '</strong> &mdash; ' + rows[i][1];
    // Create marker
    map.markers.push(createMarker(markerpos, rows[i][0], htmlDescription));
  }
  mc.addMarkers(map.markers);
}

// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    content: html
  });

    marker.info = new google.maps.InfoWindow({
  content: html
});

  // Event listener for click function
  google.maps.event.addListener(marker, 'click', function(evt) {
      infowindow.setContent(html);
      infowindow.open(map, marker);
  });
  return marker;
}


// Initialize google map and run query
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(1.74514002150984, 16.925833225250244),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 // Cluster options
  var mcOptions = {
    infoOnClick: true,   // Display info window on click
    zoomOnClick: false,  // Don't zoom on click
    infoOnClickZoom: 14, // Threshold for displaying info window
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  };


  // Mark Clusterer
  mc = new MarkerClusterer(map, map.markers, mcOptions);

  // Close the info window when clicking on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Draw map
  drawMap();
}
// Callback to initialize
google.maps.event.addDomListener(window, 'load', initialize);

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 19 апреля 2019

У меня была проблема, похожая на ту, что у тебя. Я создавал маркеры, но они также отображались на последнем маркере, который я создал. Я обнаружил, что проблема была в том, что я создавал новый маркер в цикле for. По какой-то причине это продолжало переписывать предыдущие маркеры.

Я исправил это, создав функцию, которая создает маркеры, и вызвав ее с любыми необходимыми мне данными, и вернул маркер.

...