[英]No Markers Showing After Integrating Overlapping Marker Spiderfier with Google Map v3
Currently trying to integrate the Overlapping Marker Spiderfier add-on into a Google Map setup. 当前正在尝试将重叠标记Spiderfier插件集成到Google Map设置中。 I am passing the location data to a Jade Template from MongoDB. 我正在将位置数据从MongoDB传递到Jade模板。
Before utilising the add-on, I used a for loop to create markers from an array of co-cordinates. 在利用附加组件之前,我使用了一个for循环从一组坐标中创建标记。 These were displayed as expected. 这些按预期显示。
However, when I integrated the Spiderfier code, the markers are no longer added to the map. 但是,当我集成了Spiderfier代码时,标记将不再添加到地图中。 The map is still displayed, but the JavaScript console is returning a Uncaught Reference Error - OverlappingMarkerSpiderfier is not defined
message. 该地图仍然显示,但是JavaScript控制台返回了Uncaught Reference Error - OverlappingMarkerSpiderfier is not defined
消息。 Does this mean the call to the add-on is incorrect? 这是否意味着对附加组件的调用不正确? I am fully ready to accept that I have missed something obvious but have so far tried the following to no avail: 我完全准备接受我错过了明显的事情,但是到目前为止,尝试了以下操作都无济于事:
Here is the code concerning the Google Map: 以下是有关Google Map的代码:
script(src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASXfB-y1pwF_S-qToDhYL7doiHrUFOx0Q&sensor=false")
script(src"http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")
script.
var locationArray = [];
each tweetlocations, i in locationlist
script.
var latitude = "#{tweetlocations.latitude}";
var longitude = "#{tweetlocations.longitude}";
var markerlocation = new google.maps.LatLng(latitude,longitude);
locationArray.push(markerlocation);
script.
function initialize()
{
var mapProp = {
center:markerlocation,
zoom:1,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var iw = new google.maps.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
var usualColor = 'eebb22';
var spiderfiedColor = 'ffee22';
var iconWithColor = function(color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' + color + '|000000|ffff00';
}
var shadow = new google.maps.MarkerImage('https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
oms.addListener('click', function(marker, event) {
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new google.maps.LatLngBounds();
var coord;
for (coord in locationArray) {
bounds.extend(coord);
var marker = new google.maps.Marker({
position: locationArray[coord],
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
oms.addMarker(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Looks like you made a small typo inside the second script() function, missing the =
sign between src and url. 看起来您在第二个script()函数中做了一个小的错字,但缺少src和url之间的=
符号。 Consequently the external Spiderfier script wasn't getting loaded, which explains OverlappingMarkerSpiderfier is not defined
. 因此,没有加载外部Spiderfier脚本,这说明OverlappingMarkerSpiderfier is not defined
。
So change 所以改变
script(src"http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")
so it includes a =
所以它包含一个=
script(src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.