Google地图MarkerClusterer不是群集 [英] Google Maps MarkerClusterer Not Clustering
本文介绍了Google地图MarkerClusterer不是群集的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对不起，我搜索了很高和低，似乎无法找出这一个。我有一个地图工作正常，但我试图添加MarkerClusterer和标记不聚类。新泽西州的地点应该集中在一起。任何人都可以提供一些提示？
这是我的页面：
http://vbarbershop.com/location-finder/
我得到这些javascript错误，这可能是原因？我对Google Maps有些陌生：
Uncaught TypeError：undefined不是函数markerclusterer.js：660
Uncaught TypeError：undefined不是函数markerclusterer.js：660
< script src =https：//maps.googleapis的.com /地图/ API / JS v = 3.exp&安培;传感器=假>< /脚本>
< script src =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js>< / script>
< div id =mymapstyle =width：100％; height：350px;>< / div>
< script type =text / javascript>
var infos = [];
var locations = [
['Bellingham Bakerview Square'，''http://vbarbershop.com/locations/bellingham-bakerview-square/'，48.790003，-122.494667,4]，
['River Oaks Houston'，'http://vbarbershop.com/locations/river-oaks-houston/'，29.753660，-95.410269,4]，
['Winston-Salem'，' http://vbarbershop.com/locations/winston-salem/'，36.090435，-80.286798,4]，
['Cary'，'http://vbarbershop.com/locations/cary/'，35.739575， -78.778319,4]，
['Jersey City'，'http://vbarbershop.com/locations/jersey-city/'，40.721704，-74.036919,4]，
['Hoboken'， 'http://vbarbershop.com/locations/hoboken/'，40.750605，-74.027217,4]，
];
var map = new google.maps.Map（document.getElementById（'mymap'），{
zoom：4，
center：new google.maps.LatLng（39.183608 ，-96.571669），
滚动：false，
scaleControl：true，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var iconBase ='http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';
for（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google .maps.LatLng（位置[i] [2]，位置[i] [3]），
可拖动：false，
图标：iconBase +'ico-marker.png'，
map：map
}）;
var content ='< a href ='+ locations [i] [1] +'class =maplink>'+ locations [i] [0] +' / a>'
var infowindow = new google.maps.InfoWindow（）;
google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow））{
return function（）{
/ *关闭前一个info-window * /
closeInfos（）;
infowindow.setContent（content）;
infowindow.open（map，marker）;
/ *保留句柄，以便关闭它在下一次点击事件* /
infos [0] = infowindow;
};
}）（marker，content，infowindow））;
}
函数closeInfos（）{
if（infos.length> 0）{
/ *从标记中分离信息窗口...无证在API文档* /
infos [0] .set（'marker'，null）;
/ *并关闭它* /
infos [0] .close（）;
/ *空白数组* /
infos.length = 0;
}
}
var markerCluster = new MarkerClusterer（map，locations）;
< / script>
谢谢！
解决方案
MarkerClusterer管理一组google.maps.Marker对象。位置数组不是正确的类型。
当您将它们添加到地图中时，创建一个标记数组，将该数组用作MarkerClusterer构造函数的参数。
var map = new google.maps.Map（document.getElementById（'mymap'），{
zoom：4，
center：new google.maps.LatLng（39.183608，-96.571669），
scrollwheel：false，
scaleControl：true，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var iconBase ='http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';
var gmarkers = [];
for（i = 0; i< locations.length; i ++）{
var marker = new google.maps.Marker（{
position：new google.maps。 LatLng（位置[i] [2]，位置[i] [3]），
可拖动：false，
图标：iconBase +'ico-marker.png'，
map：地图
}）;
var content ='< a href ='+ locations [i] [1] +'class =maplink>'+ locations [i] [0] +' / a>'
var infowindow = new google.maps.InfoWindow（）;
google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow））{
return function（）{
/ *关闭前一个info-window * /
closeInfos（）;
infowindow.setContent（content）;
infowindow.open（map，marker）;
/ *保留句柄，以便关闭它在下一次点击事件* /
infos [0] = infowindow;
};
}）（marker，content，infowindow））;
gmarkers.push（marker）;
}
函数closeInfos（）{
if（infos.length> 0）{
/ *从标记中分离信息窗口...无证在API文档* /
infos [0] .set（'marker'，null）;
/ *并关闭它* /
infos [0] .close（）;
/ *空白数组* /
infos.length = 0;
}
}
var markerCluster = new MarkerClusterer（map，gmarkers）;
Sorry, I've search high and low and can't seem to figure this one out. I have a map working fine, but I'm trying to add MarkerClusterer and markers aren't clustering. The locations in New Jersey should be in a cluster. Can anyone offer some hints?
This is my page: http://vbarbershop.com/location-finder/
I'm getting these javascript errors, which may be the cause? I'm somewhat unexperienced with Google Maps: Uncaught TypeError: undefined is not a function markerclusterer.js:660 Uncaught TypeError: undefined is not a function markerclusterer.js:660
This is my code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" ></script>
<div id="mymap" style="width: 100%; height: 350px;"></div>
<script type="text/javascript">
var infos = [];
var locations = [
['Bellingham Bakerview Square', 'http://vbarbershop.com/locations/bellingham-bakerview-square/', 48.790003, -122.494667, 4],
['River Oaks Houston', 'http://vbarbershop.com/locations/river-oaks-houston/', 29.753660, -95.410269, 4],
['Winston-Salem', 'http://vbarbershop.com/locations/winston-salem/', 36.090435, -80.286798, 4],
['Cary', 'http://vbarbershop.com/locations/cary/', 35.739575, -78.778319, 4],
['Jersey City', 'http://vbarbershop.com/locations/jersey-city/', 40.721704, -74.036919, 4],
['Hoboken', 'http://vbarbershop.com/locations/hoboken/', 40.750605, -74.027217, 4],
];
var map = new google.maps.Map(document.getElementById('mymap'), {
zoom: 4,
center: new google.maps.LatLng(39.183608, -96.571669),
scrollwheel: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
draggable: false,
icon: iconBase + 'ico-marker.png',
map: map
});
var content = '<a href="' + locations[i][1] + '" class="maplink">' + locations[i][0] + '</a>'
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
/* close the previous info-window */
closeInfos();
infowindow.setContent(content);
infowindow.open(map,marker);
/* keep the handle, in order to close it on next click event */
infos[0]=infowindow;
};
})(marker,content,infowindow));
}
function closeInfos(){
if(infos.length > 0){
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set('marker', null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
var markerCluster = new MarkerClusterer(map, locations);
</script>
Thank you!
解决方案
The MarkerClusterer manages an array of google.maps.Marker objects. The locations array is not the correct type.
Create an array of markers when you add them to the map, use that array as the argument to the MarkerClusterer constructor.
var map = new google.maps.Map(document.getElementById('mymap'), {
zoom: 4,
center: new google.maps.LatLng(39.183608, -96.571669),
scrollwheel: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
draggable: false,
icon: iconBase + 'ico-marker.png',
map: map
});
var content = '<a href="' + locations[i][1] + '" class="maplink">' + locations[i][0] + '</a>'
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
/* close the previous info-window */
closeInfos();
infowindow.setContent(content);
infowindow.open(map,marker);
/* keep the handle, in order to close it on next click event */
infos[0]=infowindow;
};
})(marker,content,infowindow));
gmarkers.push(marker);
}
function closeInfos(){
if(infos.length > 0){
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set('marker', null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
var markerCluster = new MarkerClusterer(map, gmarkers);
这篇关于Google地图MarkerClusterer不是群集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
