谷歌地图标记聚类类型错误

Question

我正在尝试将示例WordPress高级自定义字段Google地图代码转换为使用标记聚类。 WordPress将大量div写入如下页面：

<div class="marker" data-lat="51.48956829999999" data-lng="-0.07924179999997705">

然后将这些渲染到地图中，如下所示。

jQuery('.acf-map').each(function(){
    render_cluster_map( jQuery(this) );
});
function render_cluster_map( $el ) {
    var $markers = $el.find('.marker');
    var args = {
        zoom        : 20,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], args);
    var mc_markers = [];
    $markers.each(function(){
        var marker = jQuery(this);
        console.log('marker: '+marker)
        var latlon = new google.maps.LatLng( marker.attr('data-lat'), marker.attr('data-lng') );
        console.log('latlon: '+latlon);
        mc_markers.push( marker );
    });
    console.log('mc_markers: '+mc_markers);
    var markerCluster = new MarkerClusterer(map, mc_markers);
}

一切似乎都很好，直到最后一行它尝试渲染地图，此时我得到错误Uncaught TypeError: undefined is not a function

我的控制台.log输出如下所示：

marker: [object Object] 
latlon: (52.4602277, 0.30479379999997036) 
marker: [object Object] 
latlon: (52.226946, 0.1440727000000379) 
marker: [object Object] 
latlon: (52.45853469999999, 0.3039631000000327) 
mc_markers:
Uncaught TypeError: undefined is not a function markerclusterer.js?ver=4.1.1:649
Uncaught TypeError: undefined is not a function markerclusterer.js?ver=4.1.1:649

谁能阐明需要做些什么来解决这个问题？

Answer 1

问题是我定义了latlon，但实际上并没有使用它。 这奏效了：

function render_cluster_map( $el ) {
    var $markers = $el.find('.marker');
    var center = new google.maps.LatLng(0,0);
    var args = {
        zoom        : 2,
        center: center,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], args);
    var mc_markers = [];
    $markers.each(function(){
        var marker = jQuery(this);
        var latlon = new google.maps.LatLng( marker.attr('data-lat'), marker.attr('data-lng') );
        var mc_marker = new google.maps.Marker({
            position    : latlon
        }); 
        mc_markers.push( mc_marker );
    });
    var markerCluster = new MarkerClusterer(map, mc_markers);
    center_map(map);
}