我无法让 Google Maps MarkerClusterer 正常工作。我相当确定我正确地遵循了程序(即创建地图,将标记添加到数组,不将标记设置到地图,然后将地图和标记附加到 MarkerClusterer),这让我相信它可能有使用 Google 地图 v3 与 v2 做某事。我只是从 json 文件创建标记,然后根据用户输入过滤标记。
快速注意:当我将地图添加到标记时,所有标记都会显示,但它们只是没有聚集。
$('document').ready(function() {
$('#map').height($(window).height() - $('#map').position().top - 20);
var mapElem = document.getElementById('map');
var center = {
lat: 47.6,
lng: -122.3
}
var map = new google.maps.Map(mapElem, {
center: center,
zoom: 12
});
var infoWindow = new google.maps.InfoWindow();
var cameras;
var markers = [];
$.getJSON('http://data.seattle.gov/resource/65fc-btcc.json')
.done(function(data) {
cameras = data;
cameras.forEach(function(cameras) {
var marker = new google.maps.Marker({
position: {
lat: parseFloat(cameras.location.latitude),
lng: parseFloat(cameras.location.longitude)
}
});
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
var html = '<p>' + cameras.cameralabel + '</p>';
html += '<img src="' + cameras.imageurl.url + '"/>';
infoWindow.setContent(html);
infoWindow.open(map, this);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
markers.push(marker);
$('#search').bind('search keyup', function() {
var cameraName = cameras.cameralabel.toLowerCase();
var searchString = this.value.toLowerCase();
if (cameraName.indexOf(searchString) < 0) {
marker.setMap(null);
} else {
marker.setMap(map);
}
});
});
})
.fail(function(err) {
console.log(err);
alert('Sorry, unfortunately something went wrong!');
});
var markerCluster = new MarkerClusterer(map, markers);
$(window).resize(function() {
$('#map').height($(window).height() - $('#map').position().top - 20);
});
});
您需要在回调函数(创建标记数组的位置)内初始化 MarkerClusterer。
$('document').ready(function() {
$('#map').height($(window).height() - $('#map').position().top - 20);
var mapElem = document.getElementById('map');
var center = {
lat: 47.6,
lng: -122.3
}
var map = new google.maps.Map(mapElem, {
center: center,
zoom: 12
});
var infoWindow = new google.maps.InfoWindow();
var cameras;
var markers = [];
$.getJSON('http://data.seattle.gov/resource/65fc-btcc.json')
.done(function(data) {
cameras = data;
cameras.forEach(function(cameras) {
var marker = new google.maps.Marker({
position: {
lat: parseFloat(cameras.location.latitude),
lng: parseFloat(cameras.location.longitude)
}
});
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
var html = '<p>' + cameras.cameralabel + '</p>';
html += '<img src="' + cameras.imageurl.url + '"/>';
infoWindow.setContent(html);
infoWindow.open(map, this);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
markers.push(marker);
$('#search').bind('search keyup', function() {
var cameraName = cameras.cameralabel.toLowerCase();
var searchString = this.value.toLowerCase();
if (cameraName.indexOf(searchString) < 0) {
marker.setMap(null);
} else {
marker.setMap(map);
}
});
});
// here, inside the .done function
var markerCluster = new MarkerClusterer(map, markers);
})
.fail(function(err) {
console.log(err);
alert('Sorry, unfortunately something went wrong!');
});
$(window).resize(function() {
$('#map').height($(window).height() - $('#map').position().top - 20);
});
});
工作小提琴 http://jsfiddle.net/skfm7otw/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)