markerclusterer不工作php mysql json

Question

需要工作MarkerClusterer。我按照例子https://googlemaps.github.io/js-marker-clusterer/docs/examples.html

它不适合我。

我的源代码

 var buildings_map = <?php echo json_encode( $buildings_map ) ?>;
var infobox = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
function setMarker(building) {
  var latlng = new google.maps.LatLng(parseFloat(building.lat), parseFloat(building.lng));
 console.log(latlng);
  bounds.extend(latlng);
  var buildingMarkers = new google.maps.Marker({
    position: {lat: parseFloat(building.lat), lng: parseFloat(building.lng)},
    map: map,
    title: building.name
  });

  markerCluster = new MarkerClusterer(map, buildingMarkers);
  google.maps.event.addListener(buildingMarkers, 'click', function () {
    infobox.close();

    infobox.setContent(building.content);
    infobox.open(map, buildingMarkers);
  });

  google.maps.event.addListener(infobox, 'domready', function () {
    var iwOuter = $('.gm-style-iw');

Answer 1

您正在setMarker函数中创建markerClusterer。它将继续为每个建筑物标记重新初始化markerClusterer。

在for循环后移动markerClusterer。我还将setMarker函数移到了initMap函数之外。

您可以在脚本中替换以下代码并进行测试。

<script>
var markersArray = new Array();

function initMap() {

    var centerMap = <?php echo json_encode( $centerMap ) ?>;
    var map = new google.maps.Map(document.getElementById('map-imoveis'), {
      zoom: 4,
      center: {lat: parseFloat(centerMap.lat), lng: parseFloat(centerMap.lng)},      
      zoomControl: true,
      language: 'pt-br'    
    });

    var buildings_map = <?php echo json_encode( $buildings_map ) ?>;
    var infobox = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    for (building in buildings_map) {

        if (buildings_map.hasOwnProperty(building)) {
            setMarker(buildings_map[building]);
        }
        console.log(buildings_map[building]);      
    }


    // J - CREATE MARKER CLUSTER USING THE MARKERS ARRAY 
    var markerCluster = new MarkerClusterer(map, markersArray, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
      var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
      var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
      bounds.extend(extendPoint1);
      bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);
  }


function setMarker(building) {
      var latlng = new google.maps.LatLng(parseFloat(building.lat), parseFloat(building.lng));
      console.log(latlng);
      bounds.extend(latlng);
      var buildingMarkers = new google.maps.Marker({
        position: {lat: parseFloat(building.lat), lng: parseFloat(building.lng)},
        map: map,
        title: building.name
      });

      // J - ADD MARKER TO THE ARRAY. 
      markersArray.push(marker);

      google.maps.event.addListener(buildingMarkers, 'click', function () {
        infobox.close();

        infobox.setContent(building.content);
        infobox.open(map, buildingMarkers);
      });

      google.maps.event.addListener(infobox, 'domready', function () {
        var iwOuter = $('.gm-style-iw');

        iwOuter.css({ 'left': '0', 'width': '100%' });

        var iwBackground = iwOuter.prev();
        iwBackground.parent().css({'width': '330px'});

        iwBackground.children(':nth-child(2)').css({
          'background-color': 'transparent', 'box-shadow': 'none'
        });


        iwBackground.children(':nth-child(4)').css({
          'background-color': 'transparent'
        });

        var iwX = iwOuter.next();
        iwX.css({'right': '0', 'top': '15px'});

        iwX.children().remove();

        iwX.css({ 'width': '28px', 'height': '28px' }).append('<span style="color: #b22c2c; font-size: 22px;"><i class="rimo rimo-close">X</span>');

        iwBackground.children(':nth-child(3)').children(':first-child').children(':first-child').css({'background-color': '#fff', 'z-index': '1000', 'display': 'none', 'box-shadow': 'none'});
        iwBackground.children(':nth-child(3)').children(':last-child').children(':first-child').css({'background-color': '#fff', 'z-index': '1000', 'display': 'none', 'box-shadow': 'none'});
      });
    }  

</script>