通过JSON创建的标记不与Google地图MarkerClusterer建立群集 [英] Markers Created via JSON Are Not Clustering with Google Maps MarkerClusterer
本文介绍了通过JSON创建的标记不与Google地图MarkerClusterer建立群集的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法让Google Maps MarkerClusterer正常工作。我很确定我正确地遵循了程序（即创建地图，向数组添加标记，不将标记设置为地图，然后将地图和标记附加到MarkerClusterer），这使我相信它可能具有使用Google Maps 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/ （函数（摄像头）{
var marker =数据;
cameras.forEach（函数（数据）{
相机=数据;
camera.forEach）新的google.maps.Marker（{
位置：{
lat：parseFloat（cameras.location.latitude），
ng：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）;
$ b $（'＃search'）。bind（'search keyup'，function（）{
var cameraName = cameras.cameralabel.toLowerCase（）;
var searchString = this （）;
if（cameraName.indexOf（searchString）< 0）{
marker.setMap（null）;
} else {
marker.setMap（）地图）;
}
}）;
}）;
}）
.fail（函数（err）{
console.log（err）;
alert（'对不起，不幸出错了！'）;
}）;
var markerCluster = new MarkerClusterer（map，markers）;
$ b $（window）.resize（function（）{
$（'＃map'）。height（$（window）.height（） - $（'＃map'）。 position（）。top - 20）;
}）;
}）;
解决方案
您需要在回调函数中初始化MarkerClusterer
$ $ $ $'code $（'document'）。ready（function（）{
$ （$＃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 （{
位置：{
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）;
$ b $（'＃search'）。bind（'search keyup'，function（）{
var cameraName = cameras.cameralabel.toLowerCase（）;
var searchString = this （）;
if（cameraName.indexOf（searchString）< 0）{
marker.setMap（null）;
} else {
marker.setMap（）地图）;
}
}）;
}）;
//这里是.done函数
var markerCluster = new MarkerClusterer（map，markers）;
}）
.fail（函数（err）{
console.log（err）;
alert（'对不起，不幸出错了！'）;
}）;
$ b $（window）.resize（function（）{
$（'＃map'）。height（$（window）.height（） - $（'＃map'）。 position（）。top - 20）;
}）;
}）;
I'm having trouble getting the Google Maps MarkerClusterer to work. I'm fairly sure I follow procedure correctly (i.e. creating the map, adding markers to an array, not setting the markers to a map, and then attaching the map and the markers to a MarkerClusterer), which leads me to believe maybe it has to do something with Google Maps v3 versus v2. I'm just creating markers from a json file and than filtering the markers based off of user input.
Quick note: When I add a map to the marker all the markers show up, but they just aren't clustered.
$('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);
});
});
解决方案
You need to initialize the MarkerClusterer inside the callback function (where the markers array is created).
$('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);
});
});
这篇关于通过JSON创建的标记不与Google地图MarkerClusterer建立群集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
