Google maps API3, полилиния не по центру и не увеличена

Я получил ответ на свой вопрос, как получить полилинию в центре, но вот проблема. Когда я хочу увидеть карту. Карта инициализируется только в верхнем левом углу моего div. И когда я вызываю эту функцию:

setTimeout(function() {
            google.maps.event.trigger(map,'resize');
                    }, 200);

Я вижу карту во всем div, но полилиния не увеличена и находится в верхнем левом углу.

что я должен делать?

Мой код:

Глобальное определение:

var flightPlanCoordinates=[];
var flightPath;
var map;
var myLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
              zoom: 5,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
                                          };

Позже использовался код...

$.ajax({
                  type: 'POST',
                  url: 'history.php',
                  data: {
                  'd_year1':$('#select-choice-year1').val(),
                  'd_month1':   $('#select-choice-month1').val(),
                  'd_day1':$('#select-choice-day1').val(),
                  'd_year2':$('#select-choice-year2').val(),
                  'd_month2':   $('#select-choice-month2').val(),
                  'd_day2':$('#select-choice-day2').val()
                  },
                  success: function(data)//callback to be executed when the response has been received
                       {
                       if(data=="[]")
                       {

                            alert("None");

                       }else
                       {

                            data = JSON.parse(data);
                            for (var i=0;i<data.length;i++)
                            {

                                flightPlanCoordinates[i] = new google.maps.LatLng(data[i].x,data[i].y); 
                            }
                            map = new google.maps.Map(document.getElementById("map_find"),
                          mapOptions);
                        flightPath = new google.maps.Polyline({
                        path: flightPlanCoordinates,
                        strokeColor: "#8a2be2",
                        strokeOpacity: 1.0,
                        strokeWeight: 3
                      });

                    flightPath.setMap(map);
                    zoomToObject(flightPath);


                        }
                        }
                });

И функция масштабирования и центрирования полилинии:

function zoomToObject(obj){
    var bounds = new google.maps.LatLngBounds();
    var points = obj.getPath().getArray();
    for (var n = 0; n < points.length ; n++){
        bounds.extend(points[n]);
    }
    map.fitBounds(bounds);
    setTimeout(function() {

                        google.maps.event.trigger(map,'resize');
                    }, 200);
}

Итак, как действительно инициализировать карту, чтобы она соответствовала всему div, и как масштабировать и центрировать полилинии, чтобы они соответствовали карте?


person user123_456    schedule 23.10.2012    source источник
comment
У вашей карты ‹div› есть размер? (и ширина и высота)? Пожалуйста, добавьте код HTML для карты ‹div›.   -  person Marcelo    schedule 23.10.2012


Ответы (1)


Измените функцию масштабирования и центра на:

function zoomToObject(obj){
    var bounds = new google.maps.LatLngBounds();
    var points = obj.getPath().getArray();
    for (var n = 0; n < points.length ; n++){
        bounds.extend(points[n]);
    }
    map.fitBounds(bounds);
    setTimeout(function() {
                google.maps.event.trigger(map,'resize');
                map.fitBounds(bounds);
                }, 200);
}

Или вызовите событие изменения размера карты перед его вызовом (внутри обратного вызова AJAX).

person geocodezip    schedule 23.10.2012
comment
Я забыл вызвать его еще раз после события изменения размера. Спасибо, это сработало, как мне нужно! - person user123_456; 24.10.2012