传单，点很近的看不出来

Question

我一直在使用 Leaflet 和 Tabletop.js。主要思想是将所有数据放在 Google 电子表格中，并使用 Tabletop 读取该数据，然后显示在 Leaflet 上。几乎工作正常，除了一个问题：如果这些点非常接近（比如 2 米），我看不到两个点，只能看到最后一个。有一些配置吗？

当我创建地图时，我使用了这个代码：

    // Set view of Leaflet map based on screen size
    var layer = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    if ($(window).width() < 626) {
    var map = new L.Map('map').setView([-35,-71],20);
    } else {
    var map = new L.Map('map').setView([-35,-71],20);

此外，为了阅读 Google 电子表格，我使用

          // Group we will append our markers to
          if (window.location.hash === "#cluster") {
            // Set up cluster group
            var markers = new L.MarkerClusterGroup();
          } else {
            // Otherwise set up normal groupx`
            var markers = new L.LayerGroup();
          }

          // Google Docs spreadsheet key
          var spreadsheet_key = '1RBXvfL8A5OWKVShefgjkAlbikwnakpBzytz9fccuPzI';

          // Name of lat, long columns in Google spreadsheet
          var lat_column = 'latitude';
          var long_column = 'longitude';

          // Marker options
          var radius = 3;
          // Regular fill
          var fill_color = "#023858";
          var border_color = "#FFF";
          // Hover
          var fill_color_hover = "#FFF";
          var border_color_hover = "#333"

          var global_markers_data;

          // Function that creates our popup
          function generatePopup(content){
              // Generate header
            var popup_header = "<h4>" + toTitleCase(content['brewery']) + "</h4>"

            // Generate content
            var popup_content = '<table class="popup_table table">';
            popup_content += '<tr><td><strong>Address:</strong></td>';
            popup_content += '<td>' + content['address'] + '</td>';
            popup_content += '<tr><td><strong>City:</strong></td>';
            popup_content += '<td>' + content['city'] + '</td>';
            popup_content += '<tr><td><strong>Phone:</strong></td>';
            popup_content += '<td>' + content['phone'] + '</td>';
                popup_content += '<tr><td colspan="2"><strong><a href="http://' + content['website'] + '" target="_blank">Learn more</a></strong></td>';
            popup_content += '</tr></table>'

            return popup_header + popup_content;
          }

          // This goes through our JSON file and puts markers on map
          function loadMarkersToMap(markers_data) {
            // If we haven't captured the Tabletop data yet
            // We'll set the Tabletop data to global_markers_data
            if (global_markers_data !== undefined) {
                markers_data = global_markers_data;
            // If we have, we'll load global_markers_data instead of loading Tabletop again
            } else {
                global_markers_data = markers_data;
            }

            for (var num = 0; num < markers_data.length; num++) {
                // Capture current iteration through JSON file
                current = markers_data[num];

                // Add lat, long to marker
                var marker_location = new L.LatLng(current[lat_column], current[long_column]);

                // Determine radius of the circle by the value in total
                // radius_actual = Math.sqrt(current['total'] / 3.14) * 2.8;

                // Options for our circle marker
                var layer_marker = L.circleMarker(marker_location, {
                    radius: radius,
                    fillColor: fill_color,
                    color: border_color,
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });

                // Generate popup
                layer_marker.bindPopup( generatePopup(current) );

                // Add events to marker
                (function (num){
                    // Must call separate popup(e) function to make sure right data is shown
                    function mouseOver(e) {
                        var layer_marker = e.target;
                        layer_marker.setStyle({
                            radius: radius + 1,
                            fillColor: fill_color_hover,
                            color: border_color_hover,
                            weight: 2,
                            opacity: 1,
                            fillOpacity: 1
                        });
                        // layer_marker.openPopup();
                    }

                    // What happens when mouse leaves the marker
                    function mouseOut(e) {
                        var layer_marker = e.target;
                        layer_marker.setStyle({
                            radius: radius + 1,
                            fillColor: fill_color,
                            color: border_color,
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.8
                        });
                        // layer_marker.closePopup();
                    }

                    // Call mouseover, mouseout functions
                    layer_marker.on({
                        mouseover: mouseOver,
                        mouseout: mouseOut
                    });

                })(num)

                // Add to feature group
                markers.addLayer(layer_marker);
            }

            // Add feature group to map
            map.addLayer(markers);

            // Clear load text
            // $('.sidebar_text_intro').html('');
          };

          // Pull data from Google spreadsheet via Tabletop
          function initializeTabletopObjectMarkers(){
            Tabletop.init({
                key: spreadsheet_key,
                callback: loadMarkersToMap,
                simpleSheet: true,
                debug: false
              });
          }

          // Add JSON data to map
          // If not done with map-tabletop-geojson.js
          initializeTabletopObjectMarkers();

来自智利的感谢

Answer 1

您提供的2对坐标相距约3.6米。

var latLng1 = [-35.40665432600, -71.66499569600];
var latLng2 = [-35.4066848373, -71.66500860470];

L.latLng(latLng1).distanceTo(latLng2);

在它们的纬度上，它们在缩放 20 时仅相隔十几个像素。

在这种配置下，即使它们仍然很近并且您必须缩放到 20 级，也可以单独查看它们。

演示：https://jsfiddle.net/3v7hd2vx/234/

如果你使用Leaflet.markercluster插件，请注意默认的聚类半径是80px，所以即使缩放20，你的2个点也会合并到一个共同的聚类中。你可以使用"spiderfy"该插件的功能以分别查看它们，但不是在它们的真实位置。或者简单地减少聚类半径，至少从该缩放级别开始。或者从该缩放级别完全禁用聚类（参见 disableClusteringAtZoom 选项）

传单，点很近的看不出来

Leaflet, point very closer don't appear

javascript

leaflet

tabletop.js