Маркеры не отображаются после интеграции перекрывающего маркера Spiderfier с Google Map v3
В настоящее время пытаюсь интегрировать надстройку Spiderfier для маркера перекрытия в настройку Google Map. Я передаю данные о местоположении в шаблон Jade из MongoDB.
Прежде чем использовать надстройку, я использовал цикл for для создания маркеров из массива ко-кординатов. Они были отображены как ожидалось.
Однако, когда я интегрировал код Spiderfier, маркеры больше не добавлялись на карту. Карта по-прежнему отображается, но консоль JavaScript возвращает Uncaught Reference Error - OverlappingMarkerSpiderfier is not defined
сообщение. Означает ли это, что вызов надстройки является неправильным? Я полностью готов признать, что упустил что-то очевидное, но до сих пор пробовал следующее безрезультатно:
- Сравнение моего кода с доступными примерами дополнений
- Сравнение моего кода с другими ответами SO
Вот код, касающийся карты Google:
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);
1 ответ
Похоже, вы сделали небольшую опечатку во второй функции script(), пропустив =
знак между SRC и URL. Следовательно, внешний скрипт Spiderfier не загружался, что объясняет OverlappingMarkerSpiderfier is not defined
,
Так что меняй
script(src"http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")
так что включает в себя =
script(src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")