将重叠标记 Spiderfier 与 Google Map v3 集成后不显示标记答案

【问题标题】：No Markers Showing After Integrating Overlapping Marker Spiderfier with Google Map v3将重叠标记 Spiderfier 与 Google Map v3 集成后不显示标记
【发布时间】：2014-04-26 00:18:27
【问题描述】：

目前正在尝试将 Overlapping Marker Spiderfier 插件集成到 Google 地图设置中。我正在将位置数据从 MongoDB 传递到 Jade 模板。

在使用插件之前，我使用了一个 for 循环从坐标数组创建标记。这些都按预期显示。

但是，当我集成 Spiderfier 代码时，标记不再添加到地图中。地图仍会显示，但 JavaScript 控制台正在返回 Uncaught Reference Error - OverlappingMarkerSpiderfier is not defined 消息。这是否意味着对加载项的调用不正确？我已经完全准备好接受我错过了一些明显的东西，但到目前为止我尝试了以下方法无济于事：

将我的代码与可用的附加示例进行比较
将我的代码与其他 SO 答案进行比较

这是关于谷歌地图的代码：

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);

【问题讨论】：

javascript 控制台告诉你什么（关于 javascript 错误）？
不知道那个方便的工具 - JavaScript 的新手（我确信很明显）所以谢谢！它说存在“未捕获的参考错误：未定义重叠标记蜘蛛”。猜测这意味着我对附加脚本的调用不正确。
您可能会收到一条错误消息，提示 it is not executable or like that...

标签： javascript mongodb google-maps pug markerspiderfier

【解决方案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")

【讨论】：