Question

尝试在我的网站上使用google maps api v3（带标记clusterer）时遇到问题。这是我现在的输出：

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>

我真的不知道我应该在哪里检查错误/错误的样式和东西。在参考页面和教程之后，我似乎正在正确地做所有事情（我不确定markerclusterer和latlngbounds之间的最终冲突，所以）

提前感谢所有人！

Answer 1

您是否尝试使用$ .goMap？这是一个很棒的jQuery插件，它有一个非常简单的标记聚类方法：

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

谷歌地图api v3 + marker clusterer：居中地图？

1 个答案: