将标记添加到 Google 将进入标记集群的地图
Add Markers to Google Maps that will go into a Marker Cluster
我添加了 4 个位置,当页面加载并缩小时,它们会聚集成 4 个一组。
我添加了一个点击事件来给地图添加标记。我无法让那些添加的标记成为标记集群,就像我在脚本中放入的 4 个位置一样。
我该怎么做?
<div id="mapContainer">
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbdYz0sVFHyKAMVP051D_UI1PsbxQ92n8&callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 33.034405, lng: -117.292928}
});
// 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]
});
});
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.push({event: latLng});
}
//Add Marker click function
map.addListener('click', function(event) {
addMarker(event.latLng);
console.log(locations);
});
// Add a marker cluster to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
{lat: 33.034405, lng: -117.292300},
{lat: 33.020933, lng: -117.285465},
{lat: 33.047011, lng: -117.298916},
{lat: 33.045600, lng: -117.298309},
];
</script>
修改您的事件侦听器以将新创建的标记也添加到标记集群中:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.push({event: latLng});
//add this:
markerCluster.addMarker(marker);
}
代码片段:
html,
body,
#mapContainer,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="mapContainer">
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 33.034405,
lng: -117.292928
}
});
// 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]
});
});
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markerCluster.addMarker(marker);
}
//Add Marker click function
map.addListener('click', function(event) {
addMarker(event.latLng);
console.log(locations);
});
// Add a marker cluster to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 33.034405,
lng: -117.292300
},
{
lat: 33.020933,
lng: -117.285465
},
{
lat: 33.047011,
lng: -117.298916
},
{
lat: 33.045600,
lng: -117.298309
},
];
</script>
我添加了 4 个位置,当页面加载并缩小时,它们会聚集成 4 个一组。
我添加了一个点击事件来给地图添加标记。我无法让那些添加的标记成为标记集群,就像我在脚本中放入的 4 个位置一样。
我该怎么做?
<div id="mapContainer">
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbdYz0sVFHyKAMVP051D_UI1PsbxQ92n8&callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 33.034405, lng: -117.292928}
});
// 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]
});
});
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.push({event: latLng});
}
//Add Marker click function
map.addListener('click', function(event) {
addMarker(event.latLng);
console.log(locations);
});
// Add a marker cluster to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
{lat: 33.034405, lng: -117.292300},
{lat: 33.020933, lng: -117.285465},
{lat: 33.047011, lng: -117.298916},
{lat: 33.045600, lng: -117.298309},
];
</script>
修改您的事件侦听器以将新创建的标记也添加到标记集群中:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.push({event: latLng});
//add this:
markerCluster.addMarker(marker);
}
代码片段:
html,
body,
#mapContainer,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="mapContainer">
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 33.034405,
lng: -117.292928
}
});
// 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]
});
});
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markerCluster.addMarker(marker);
}
//Add Marker click function
map.addListener('click', function(event) {
addMarker(event.latLng);
console.log(locations);
});
// Add a marker cluster to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 33.034405,
lng: -117.292300
},
{
lat: 33.020933,
lng: -117.285465
},
{
lat: 33.047011,
lng: -117.298916
},
{
lat: 33.045600,
lng: -117.298309
},
];
</script>