javascript - GeoJSON、重叠指针、OverlappingMarkerSpiderfier

Question

我对 Google Maps Api 还很陌生。在 GeoJson 文件中，我有地理位置列表(经纬度坐标)。

与:

map.data.loadGeoJson('json/geojson.json');

我将数据作为 Point-s 放在 map 上。我对具有相同坐标的点有问题。

我发现了这个 https://github.com/jawj/OverlappingMarkerSpiderfier

但这适用于标记，所以我无法让它工作。

建议？我可以使用 OverlappingMarkerSpiderfier 做到这一点吗？

我的代码:

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 13,
        center: {lat: 45.8167, lng: 15.9833}
    });

    map.data.loadGeoJson('json/geojson.json');

    //////////////////////////
    //CODE FOR GROUPING POINTERS/MARKERS
    //////////////////////////

    map.data.setStyle(function (feature) {
        return {
            icon: '/inc/mapper/img/' + feature.getProperty('icon_url') + '.png',
        };
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

处理 GeoJson，创建您自己的标记，将它们添加到 OverlappingMarkerSpiderfier。

下面的示例使用 MarkerClustererPlus 和 OverlappingMarkerSpiderfier，数据来自页面本地的 GeoJSON。

working jsfiddle (比勒费尔德中心的重复标记位置)

工作代码片段:

var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(null, null, {
  imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(52, 8),
    zoom: 4
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var oms = new OverlappingMarkerSpiderfier(map, {
    markersWontMove: true,
    markersWontHide: true,
    keepSpiderfied: true
  });

  markerClusterer.setMap(map);
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'Point') {
      var marker = new google.maps.Marker({
        position: e.feature.getGeometry().get(),
        title: e.feature.getProperty('name'),
        map: map
      });
      google.maps.event.addListener(marker, 'click', function(marker, e) {
        return function() {

          var myHTML = e.feature.getProperty('name');
          boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
          infobox.setPosition(e.feature.getGeometry().get());
          infobox.setOptions({
            pixelOffset: new google.maps.Size(0, 0)
          });
          infobox.open(map);
        };
      }(marker, e));
      markerClusterer.addMarker(marker);
      oms.addMarker(marker);

      bounds.extend(e.feature.getGeometry().get());
      map.fitBounds(bounds);
      map.setCenter(e.feature.getGeometry().get());
    }
  });
  layer = map.data.addGeoJson(geoJson);
  map.data.setMap(null);
  google.maps.event.addListener(map, "click", function() {
    infobox.close();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};

#map {
  width: 500px;
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<div id="map"></div>