谷歌地图api v3 +标记聚类器:居中地图

Question

我遇到了一个问题，而试图使用谷歌地图api v3(与标记集群)在我的网站。这是我现在的输出:

http://imageshack.us/photo/my-images/710/mapproblem.png/

编辑:我第一次在帖子中使用图片，我似乎不能直接发布，所以我发布了链接代替。很抱歉。

可以看到，没有对齐

这是代码的重要部分:

show_map.js

function showMap(json_items) {
        var geocoder = new google.maps.Geocoder();
        var latlng;
        geocoder.geocode({'address':json_items[0]}, function(results,status){
            latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        });
        var markers = []
        var markoptions = {
            maxZoom : 10,
            gridSize : 50
        }
        var bounded = new google.maps.LatLngBounds();
        var options = {
            'mapTypeId': google.maps.MapTypeId.ROADMAP,
            'center': latlng
        };
        var map = new google.maps.Map(document.getElementById("big_map"), options);
        if(document.getElementById("big_map")){
            for (var i=1; i<10; i++ ){
                geocoder.geocode({'address': json_items[i]}, function(results, status){
                    var marker = new google.maps.Marker({position: results[0].geometry.location, map:map});
                    markers.push(marker);
                });
                bounded.extend(results[0].geometry.location);
                map.fitBounds(bounded);
            }
            var markerCluster = new MarkerClusterer(map, markers, markoptions);
            //map.fitBounds(markerCluster.getExtendedBounds(bounded));
        }
}

main.css

/*Big google map*/
#big-map {
    border: solid 1px #afafaf;
    background: #fff;
    margin-bottom: 15px;
    display: none;
}
#big-map .title {
    border-bottom: solid 1px #afafaf;
    background: #ebebeb;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 0 10px;
}
#big-map #big_map {
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 3;
        width: 948px;
        height: 280px;
}

最后是模板:

 <div class="grid_24">
      <div id="big-map">
          <h2 class="title">Map</h2>
          <div id="big_map"></div> <!-- this is where the actual map should spanw -->
          <a class="link" href="#">Reduce map</a>
      </div>
      <div class="clear"></div>     
 </div>
 <div class="clear"></div>

我真的不知道我应该在哪里检查错误/错误的风格和东西。按照参考页面和教程，我似乎做的一切都是正确的(我不确定markkerclusterer和latlngbounds之间的最终冲突，虽然)

提前感谢大家!

Answer 1

你试过使用$. gmap吗?这是一个很棒的jQuery插件，它有一个非常简单的标记聚类方法:

http://www.pittss.lv/jquery/gomap/solutions/markerclusterer.html