javascript - 地图标记不聚类
问题描述
我有一张地图,其中有多个彼此非常接近的标记。试图通过谷歌开发工具包集成标记聚类。
然而,集群没有发生,也没有在控制台中出现错误——这使得它有点棘手。
正在使用的地图数据:
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
的,因此集群无法正常工作。
要解决它:
MarkerClusterer
在 addMark() 上删除新的- 从返回标记
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;
},
- 将新标记推入数组
- 添加
MarkerClusterer
下面的新$.each
位置并使用在步骤 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",
});
推荐阅读
- c# - 有没有办法从实体框架中的外键表中检索列
- python - PyQt5中线程应用程序中的信息错误对话管理
- java - 在 Java 中生成一个随机的、固定长度的 BigInteger
- sqlite - 我从 ListView QML(SQLite 数据库)中的 QSqlQueryModel 获得未定义的数据
- roundcube - roundcube 安装后无法登录
- javascript - 为什么画布没有出现在引导表上?
- javascript - 如果按钮是可重用的 React 组件,如何仅在一个选项中禁用 React 中的按钮?
- facebook - 如何通过 API 在 facebook 页面上发布评论
- amp-html - AMP 文章缓存不正确:文章内容未显示
- angular - 如何从另一个组件调用组件的ngOnInit