作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
抱歉,我到处搜索,似乎无法弄清楚这个问题。我有一张工作正常的 map ,但我正在尝试添加 MarkerClusterer 并且标记没有聚类。新泽西州的位置应该位于一个集群中。谁能提供一些提示吗?
这是我的页面: http://vbarbershop.com/location-finder/
我收到这些 JavaScript 错误,这可能是原因吗?我对谷歌地图有点缺乏经验:未捕获的类型错误:未定义不是函数markerclusterer.js:660未捕获的类型错误:未定义不是函数markerclusterer.js:660
这是我的代码:
<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>
谢谢!
最佳答案
MarkerClusterer 管理 google.maps.Marker 对象的数组。位置数组的类型不正确。
将标记添加到 map 时创建标记数组,使用该数组作为 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(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);
关于javascript - 谷歌地图MarkerClusterer不聚类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25234976/
我是一名优秀的程序员,十分优秀!