Google 点彼此靠近时地图标记聚类不打开
Google map Marker Clustering not open when the point near each others
我使用 Google 地图 API v3。我在下面有这个对象。我计算了它们之间的距离,大约是 1 米,我的问题是当我放大最后一个集群时从未打开,我看不到这些点。我用marker Cluster(因为我有50k多点)。
var locations = [
{lat: 41.2387918, lng: 65.00829530},
{lat: 41.23880147, lng: 65.00829530}
]
注意:我找到了一些答案,他们建议为每个点添加一个随机数,但我想要确切的位置。
您需要设置 MarkerClusterer
的 maxZoom
。
maxZoom: number
The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels.
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 20,
});
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var bounds = {
north: 41.238854621921156,
east: 65.00841750814823,
south: 41.23873864802776,
west: 65.00817309185175
}
map.fitBounds(bounds);
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 20,
});
}
var locations = [{
lat: 41.2387918,
lng: 65.00829530
},
{
lat: 41.23880147,
lng: 65.00829530
}
]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
我使用 Google 地图 API v3。我在下面有这个对象。我计算了它们之间的距离,大约是 1 米,我的问题是当我放大最后一个集群时从未打开,我看不到这些点。我用marker Cluster(因为我有50k多点)。
var locations = [
{lat: 41.2387918, lng: 65.00829530},
{lat: 41.23880147, lng: 65.00829530}
]
注意:我找到了一些答案,他们建议为每个点添加一个随机数,但我想要确切的位置。
您需要设置 MarkerClusterer
的 maxZoom
。
maxZoom: number
The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels.
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 20,
});
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var bounds = {
north: 41.238854621921156,
east: 65.00841750814823,
south: 41.23873864802776,
west: 65.00817309185175
}
map.fitBounds(bounds);
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 20,
});
}
var locations = [{
lat: 41.2387918,
lng: 65.00829530
},
{
lat: 41.23880147,
lng: 65.00829530
}
]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>