這可能有一個非常簡單的解決方案，但我遇到了麻煩。我有一個簡單的markerclusterer。它集中了兩點：
概念證明小提琴
代碼片段：
var markers = [];
$(document).ready(function() {
console.log("$(document).ready")
var myOptions = {
center: new google.maps.LatLng(40.69484947367398, -80.30684540632623), //40.445235,-80.00594
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log(map.getZoom());
})
var myPoints = [
[40.67241473672653, -80.30913200196709],
[40.67244572478815, -80.30880637497815]
];
for (var i = 0; i < myPoints.length; i ) {
var lat = parseFloat(myPoints[i][0]);
var lng = parseFloat(myPoints[i][1]);
var point = new google.maps.LatLng(lat, lng);
var marker = createMarker(point, map);
} //end for
var markerClusterer = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 50,
maxZoom: 15,
zoomOnClick: false // turn off the default clusterclick behavior
});
google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
var bounds = cluster.getBounds();
google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
if (map.getZoom() > 18)
map.setZoom(18);
});
map.fitBounds(bounds);
});
});
function createMarker(point, map) {
// Create the HTML text based on the values passed in from XML
var icon = {
path: "M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z", //SVG path of awesomefont marker
fillColor: '#BF3604', //color of the marker
fillOpacity: 1,
strokeWeight: 0.4,
strokeColor: '#000000',
scale: 0.07, //size of the marker, careful! this scale also affects anchor and labelOrigin
anchor: new google.maps.Point(200, 510), //position of the icon, careful! this is affected by scale
labelOrigin: new google.maps.Point(205, 190) //position of the label, careful! this is affected by scale
}
var marker = new google.maps.Marker({
// id: marker_id,
position: point,
map: map,
icon: icon
});
markers.push(marker); //add this marker to an array of all markers
}html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#map_canvas {
width: 100%;
max-width: none;
height: 100%;
z-index: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>MarkerClusterer example</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/443949.html