地图标记不聚类
Map markers not clustering
我有一张地图,其中有多个彼此非常接近的标记。尝试通过 google 开发套件集成标记聚类。
但是没有发生集群,并且我在控制台中也没有收到错误 - 这使得它有些棘手。
正在使用的地图数据:
var places = [{
"id": 1,
"name": "Test",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9630
},
"description": "This is a test",
"is_active": true
},
{
"id": 2,
"name": "Test2",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9430
},
"description": "This is a test",
"is_active": true
},
{
"id": 3,
"name": "Test3",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9530
},
"description": "This is a test",
"is_active": true
},
{
"id": 4,
"name": "Test4",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9670
},
"description": "This is a test",
"is_active": true
}]
Javascript:
var GoogleMap = {
map: null,
markers: {},
init: function(lat, lng, places) {
var self = this;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lng)
};
this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(50, 50)
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
this.map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(), 12));
});
$.each(places, function() {
self.addMarker(this);
});
this.setCenterPoint();
},
// Create map markers
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// cluster the markers using google marker clusterer
var markerClusterer = new MarkerClusterer(this.map, self.marker, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
},
// Update map markers
updateMarkers: function(records) {
var self = this;
$.each(self.markers, function() {
this.setMap(null);
})
$.each(records, function() {
self.markers[this.id].setMap(self.map);
});
//Set map center
if (records.length) self.setCenterPoint();
},
// Set centre point for map
setCenterPoint: function() {
var lat = 0,
lng = 0;
count = 0;
//Calculate approximate center point based on number of JSON entries
for (id in this.markers) {
var m = this.markers[id];
if (m.map) {
lat += m.getPosition().lat();
lng += m.getPosition().lng();
count++;
}
}
if (count > 0) {
this.map.setCenter(new google.maps.LatLng(lat / count, lng / count));
}
}
};
// CHANGE MAP FOCUS:
function showCompany(lat, lng) {
var position = new google.maps.LatLng(lat, lng);
map.setCenter(position);
alert(lat, lng);
}
通过 div ID 'map' 在 html 中显示地图。
我创建了一个 JSFiddle 来查看正在#map 中加载的地图标记,但正如您所见。标记正在加载,但未聚类。
在拼命尝试解决问题时,我还尝试更改默认缩放级别,因为我认为这可能会导致问题。
奇怪的是没有人回复你赏金。
这是基于您的聚类标记版本:
https://jsfiddle.net/qakbnx6h/1/
问题出在 addMarker()
,您为每个地方创建了一个新的 MarkerClusterer
,因此集群无法正常工作。
求解:
- 删除 addMark() 上的新
MarkerClusterer
- return 来自
addMaker()
的标记
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// return marker;
return marker;
},
- 将新标记推入数组
- 在
$.each
个位置下方添加新的 MarkerClusterer
并使用在第 3 步中创建的数组标记
// markers array to store place marker
const markers = []
$.each(places, function() {
// push new marker to array
markers.push( self.addMarker(this));
});
// use the markers in MarkerClusterer
const markerClusterer = new MarkerClusterer(this.map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
我有一张地图,其中有多个彼此非常接近的标记。尝试通过 google 开发套件集成标记聚类。
但是没有发生集群,并且我在控制台中也没有收到错误 - 这使得它有些棘手。
正在使用的地图数据:
var places = [{
"id": 1,
"name": "Test",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9630
},
"description": "This is a test",
"is_active": true
},
{
"id": 2,
"name": "Test2",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9430
},
"description": "This is a test",
"is_active": true
},
{
"id": 3,
"name": "Test3",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9530
},
"description": "This is a test",
"is_active": true
},
{
"id": 4,
"name": "Test4",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9670
},
"description": "This is a test",
"is_active": true
}]
Javascript:
var GoogleMap = {
map: null,
markers: {},
init: function(lat, lng, places) {
var self = this;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lng)
};
this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(50, 50)
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
this.map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(), 12));
});
$.each(places, function() {
self.addMarker(this);
});
this.setCenterPoint();
},
// Create map markers
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// cluster the markers using google marker clusterer
var markerClusterer = new MarkerClusterer(this.map, self.marker, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
},
// Update map markers
updateMarkers: function(records) {
var self = this;
$.each(self.markers, function() {
this.setMap(null);
})
$.each(records, function() {
self.markers[this.id].setMap(self.map);
});
//Set map center
if (records.length) self.setCenterPoint();
},
// Set centre point for map
setCenterPoint: function() {
var lat = 0,
lng = 0;
count = 0;
//Calculate approximate center point based on number of JSON entries
for (id in this.markers) {
var m = this.markers[id];
if (m.map) {
lat += m.getPosition().lat();
lng += m.getPosition().lng();
count++;
}
}
if (count > 0) {
this.map.setCenter(new google.maps.LatLng(lat / count, lng / count));
}
}
};
// CHANGE MAP FOCUS:
function showCompany(lat, lng) {
var position = new google.maps.LatLng(lat, lng);
map.setCenter(position);
alert(lat, lng);
}
通过 div ID 'map' 在 html 中显示地图。
我创建了一个 JSFiddle 来查看正在#map 中加载的地图标记,但正如您所见。标记正在加载,但未聚类。
在拼命尝试解决问题时,我还尝试更改默认缩放级别,因为我认为这可能会导致问题。
奇怪的是没有人回复你赏金。
这是基于您的聚类标记版本:
https://jsfiddle.net/qakbnx6h/1/
问题出在 addMarker()
,您为每个地方创建了一个新的 MarkerClusterer
,因此集群无法正常工作。
求解:
- 删除 addMark() 上的新
MarkerClusterer
- return 来自
addMaker()
的标记
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// return marker;
return marker;
},
- 将新标记推入数组
- 在
$.each
个位置下方添加新的MarkerClusterer
并使用在第 3 步中创建的数组标记
// markers array to store place marker
const markers = []
$.each(places, function() {
// push new marker to array
markers.push( self.addMarker(this));
});
// use the markers in MarkerClusterer
const markerClusterer = new MarkerClusterer(this.map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});