谷歌地图API3，折线不在中心，也没有放大 [英] Google maps API3, polyline is not in the center and not zoomed

问题描述

我在如何在中心获得多段线的问题上得到了答案，但问题在于此。
当我想看地图时。地图只在我的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 
}; 
  

后来使用的代码...

<$ p
$'$'$'$'$ $ $'$'$'$'$'$'$'$'$'$'$' ：$（'＃select-choice-year1'）。val（），
'd_month1'：$（'＃select-choice-month1'）。val（），
'd_day1'：$ （'＃select-choice-day1'）。val（），
'd_year2'：$（'＃select-choice-year2'）。val（），
'd_month2'：$（' val（），
'd_day2'：$（'＃select-choice-month2'）。val（）数据）//收到响应时执行回调
{
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 ，数据[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  bounds.extend（points [n]）; 
} 
 map.fitBounds（bounds）; 
 setTimeout（function（）{
 
 google.maps.event.trigger（map，'resize'）; 
}，200）; 
 
 $ / code> 

那么如何真正初始化地图以适应整个div，以及如何缩放和中心多段线适合地图吗？

解决方案

更改您的缩放&中心函数为：



  function zoomToObject（obj）{
 var bounds = new google.maps.LatLngBounds（）; 
 var points = obj.getPath（）。getArray（）; 
 for（var n = 0; n  bounds.extend（points [n]）; 
} 
 map.fitBounds（bounds）; 
 setTimeout（function（）{
 google.maps.event.trigger（map，'resize'）; 
 map.fitBounds（bounds）; 
}，200）; 
 
 $ / code> 

或者在调用它之前触发地图大小调整事件（在AJAX回调中） 。

I got the answer on my question of how to get polyline in the center but here is the problem. When I want to see the map. Map is only initialized in the upper left corner of my div. And when I call this function:

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

I can see the map in the entire div but the polyline is not zoomed and it is inside the upper left corner.

what should I do?

My code:

Global define:

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
                                          };

Later used code...

$.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);


                        }
                        }
                });

And the function for zoom and center the polyline:

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);
}

So how to really initialize the map to fit entire div and how to zoom and center polylines to fit the map?

解决方案

Change your zoom & center function to:

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);
}

Or trigger the map resize event before you call it (inside the AJAX callback).

这篇关于谷歌地图API3，折线不在中心，也没有放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！