Google maps api v3 + кластерный маркер: центрирующая карта? - PullRequest
2 голосов
/ 29 декабря 2011

У меня возникла проблема при попытке использовать Google Maps 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>

Я действительно не знаю, где я должен проверять ошибки / неправильные стили и прочее.следуя справочной странице и учебникам, я, кажется, все делаю правильно (я не уверен насчет возможного столкновения между markerclusterer и latlngbounds, tho)

спасибо всем заранее!

1 Ответ

1 голос
/ 03 января 2012

Вы пытались использовать $ .goMap? Это отличный плагин jQuery, и у него очень простой метод кластеризации маркеров:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...