Tích hợp Spiderfier JS vào markerClusterer V3 để phát hiện nhiều điểm đánh dấu bằng chính xác/dài

Question

Tôi đang sử dụng markerCLusterer V3 trên tệp db từ Trình tạo phim để tạo bản đồ giao hàng hiện tại (dựa trên địa chỉ). Lấy lat/long từ Google và điền vào các trường đó là không có vấn đề gì. Tạo bản đồ thông qua markerClusterer là không có vấn đề gì. Tôi thậm chí còn lưu trữ JS cục bộ để tôi có thể thay đổi biến maxZoom để tách các cụm ra xa nhau ở trên mức thu phóng tối đa, để tôi có thể thấy nhiều điểm đánh dấu. Tuy nhiên, với các điểm đánh dấu chính xác cùng một lat/long, tôi chỉ có thể nhìn thấy điểm đánh dấu cuối cùng. Tôi muốn tích hợp OverlappingMarkerSpiderfier vào JS này để sau khi phóng to qua maxZoom, các điểm đánh dấu sẽ "tách rời" để xem các dấu (ví dụ, nhiều phần thiết bị được gửi đến cùng một địa chỉ). Tôi không thể tìm thấy bất kỳ thông tin nào trên trang web về cách thực hiện việc này. Nó đơn giản và tôi đang thiếu nó hoặc nó chưa được thực hiện. Cảm ơn trước sự giúp đỡ nào!

Answer 1

Tôi đã xem qua bài đăng này vì tôi đang tìm kiếm chính xác điều tương tự, nhưng may mắn cho tôi tôi đã làm cho nó hoạt động!

Tôi thành thật không làm bất cứ điều gì đặc biệt, tôi đã làm theo hướng dẫn tích hợp cho MarkerClusterer, và sau đó làm theo hướng dẫn tích hợp cho OverlappingMarkerSpiderfier và chúng hoạt động hoàn hảo cùng nhau.

Khi tôi nhấp/phóng to một cụm thuộc tính ở cùng một địa chỉ, ban đầu nó chỉ hiển thị điểm đánh dấu "trên cùng", nhưng khi tôi nhấp vào, chúng Spiderfy giống như bạn muốn chúng!

Bạn nhận được kết quả cụ thể nào khi bạn cố gắng sử dụng hai tập lệnh cùng nhau?

Answer 2

Tôi đang sử dụng: MarkerClustererPlus-2.0.14 và Chồng chéoMarkerSpiderfier-version- ??

Ban đầu chỉ có các công việc phân cụm, nhấp vào một cụm, phóng to nhưng 2 hoặc nhiều điểm đánh dấu trên cùng một điểm chính xác vẫn ở lại một cụm ngay cả khi được phóng to đến mức tối đa. Rất tiếc, không có spiderfier nào xuất hiện :-(

Nhưng hơn chú ý phương thức setMaxZoom() trên markerClusterPlus. Khi thiết lập này, mức thu phóng thích hợp (15 đối với tôi) của bạn sẽ vượt quá mức thu phóng. nói rằng nó không phải là doanh nghiệp của tôi nữa từ đây trên nó lên đến spiderfier :-).

Answer 3

Thiết zoom tối đa sẽ khắc phục vấn đề:

minClusterZoom = 14; 
markerCluster.setMaxZoom(minClusterZoom); 

nhưng để xem mục đích bạn có thể muốn tạo ra một người biết lắng nghe clusterclick để ngăn chặn nó từ phóng to thực sự chặt chẽ trên một cụm các điểm ở cùng một vị trí (nhấp chuột vào một cụm thiết lập các giới hạn của bản đồ để trang trải các điểm trong cụm, nếu tất cả các điểm đang ở cùng một vị trí đó sẽ phóng to tất cả các cách, mà có xu hướng trông xấu):

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
    map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on 
    if(map.getZoom() > minClusterZoom+1) // If zoomed in past 15 (first level without clustering), zoom out to 15 
     map.setZoom(minClusterZoom+1); 
}); 

Answer 4

var markerClusterer = new MarkerClusterer(map, myMarkers, { 
maxZoom: 15, 
zoomOnClick: false 
    }); 
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup 
//markerCluster goes away after zoom 
//turn off zoom on click or spiderfy won't work 

Answer 5

Lồng ghép Spiderfier JS vào markerClusterer

• Tải tập tin oms.min.js từ here
• Tải markerClusterer.js và ảnh thư mục từ here

Để làm cho cả hai làm việc cùng nhau, bạn chỉ cần để thêm một maxZoom vào đối tượng clusterMarker

new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 

(Zoomlevel 0 là trái đất hoàn chỉnh và 20 là khá gần mặt đất). Điều này có nghĩa là nếu bạn phóng to bản đồ xa hơn như mức thu phóng 15 (ví dụ nếu bạn bấm vào một cụm) thì các cụm sẽ không được hiển thị nữa. Nếu bây giờ bạn nhấp vào các điểm đánh dấu trên cùng một vị trí (hoặc gần nhau) Spiderfier JS sẽ kích hoạt.

Sau đây là ví dụ làm việc tối thiểu. Tôi đã thực hiện một số ý kiến ​​trong các mã vì vậy tôi nghĩ tự giải thích của nó, nhưng đây là một số điều cần đề cập đến:

• Thay YOUR_API_KEY với api của bạn chính
• Hãy chắc chắn để tải oms.min.js sau khi bạn nạp các bản đồ google api

Ví dụ:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <script  src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY"> 
    </script> 
    <script src="oms.min.js"></script> 
    <script src="markerclusterer.js"></script> 
    <script> 
    window.onload = function() { 
     // cluster marker 
     var clusterMarker = []; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(50, 3), 
     zoom: 6, 
     mapTypeId: 'terrain' 
     }); 

     // Create infowindow 
     var infoWindow = new google.maps.InfoWindow(); 

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

     // This is necessary to make the Spiderfy work 
     oms.addListener('click', function(marker) { 
     infoWindow.setContent(marker.desc); 
     infoWindow.open(map, marker); 
     }); 

     // Some sample data 
     var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}]; 


     for (var i = 0; i < sampleData.length; i ++) { 

     var point = sampleData[i]; 
     var location = new google.maps.LatLng(point.lat, point.lng); 

     // create marker at location 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 

     // text to appear in window 
     marker.desc = "Number "+i; 

     // needed to make Spiderfy work 
     oms.addMarker(marker); 

     // needed to cluster marker 
     clusterMarker.push(marker); 
     } 

     new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 
    } 
    </script> 
</head> 
<body><div id="map" style='width:400px;height:400px;'></div></body></html> 

---

Đề xuất

Nếu bạn bắt đầu từ đầu, tôi khuyên bạn nên sử dụng JS Libary Leaflet. Vì thư viện này cung cấp cho bạn plugin tích hợp LeafletMarkerCluster về cơ bản là trình đánh dấu độc quyền với Spiderfier được tích hợp và rất nhiều nội dung thú vị khác.

Ưu điểm:

• Cụm trông thật sự tốt đẹp
• Tờ rơi thực sự dễ sử dụng và có vẻ khá
• Bạn không cần phải tùy chỉnh mã, vì Spiderfier và markerCluster đã được tích hợp
• Một số ưa thích các công cụ khác: Giống như hiển thị đường viền trên di chuột của khu vực có điểm đánh dấu.
• Bạn có thể tự do lựa chọn đồ-gạch-nhà cung cấp của bạn và không còn bị hạn chế vào Google Maps (possible providers here)

Downsites:

• Bạn có thể cần phải đầu tư 30 phút để học và sử dụng các Tờ rơi API thay vì API Google
• Nếu bạn muốn sử dụng Google Map Tiles, thì bạn cần sử dụng plugin này, vì bạn chỉ được phép sử dụng Google Tiles khi sử dụng API Google. Plugin này là trình bao bọc cho API Google.

Dưới đây là một ví dụ mã:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
    <link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" /> 
    <link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" /> 
    <script src="leaflet/dist/leaflet.markercluster-src.js"></script> 
    <script> 
    $(document).ready(function(){ 

    var tiles = L.tileLayer(***);//Depending on your tile provider 

    var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]}); 

    var markers = new L.MarkerClusterGroup({ 
     removeOutsideVisibleBounds: true, 
     spiderfyDistanceMultiplier: 2, 
     maxClusterRadius: 20 
    }); 
    var markersList = []; 

    var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}]; 

    for (var i = 0; i < sampleData.length; i ++) { 

     var point = sampleData[i]; 
     var location = new L.LatLng(point.lat, point.lng); 

     // create marker at location 

     var m = new L.Marker(location); 
     m.bindPopup("Number" +i); //Text to appear in window 
     markersList.push(m); 
     markers.addLayer(m); 
    } 

    var bounds = markers.getBounds(); 
    map.fitBounds(bounds) 
    map.addLayer(markers); 
}  
</head> 
<body><div id="map" style='width:400px;height:400px;'></div></body></html>