谷歌地图 api v3 的 fitbounds 不以我的折线为中心

发布于 2024-12-22 06:59:33 字数 1300 浏览 3 评论 0原文

我希望能够对我的网站的所有折线进行居中缩放。

另外，我想为每个新坐标对添加标记。我见过很多关于多个标记和多个多边形的示例，但从未见过折线，而且我无法解决这个问题...

我见过一些非常有用的页面，例如这样的页面： http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

但大多数人都假设有某种知识事先，虽然我了解不多。

这是我的代码：

<script type="text/javascript">

  function initialize() {
  var myLatLng = new google.maps.LatLng(45.397, 5.644);
  var centerLatLng = new google.maps.LatLng(35.71,-1.905);

  var myOptions = {
    zoom: 5,
    center: centerLatLng,
    scrollwheel: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(45.397, 5.644),
    new google.maps.LatLng(28.713383,-17.905781),
    new google.maps.LatLng(20.713383,-19.905781),
    new google.maps.LatLng(25.713383,-29.905781),

  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#dddd00",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  flightPath.setMap(map);

}
</script>

提前致谢，我对 googles API 和这个网站非常陌生。

原文

I want to be able to center zoom on all my polylines for my site.

Also, I'd like to add markers to each of these new coordinate pairs. I've seen lots of examples for multiple markers and multiple plygons, but never for polylines and I can't get around this problem...

I've seen some very helpful pages like this one: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

But most of them assume some kind of knowledge beforehand, whereas I don't know much.

This is my code:

<script type="text/javascript">

  function initialize() {
  var myLatLng = new google.maps.LatLng(45.397, 5.644);
  var centerLatLng = new google.maps.LatLng(35.71,-1.905);

  var myOptions = {
    zoom: 5,
    center: centerLatLng,
    scrollwheel: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(45.397, 5.644),
    new google.maps.LatLng(28.713383,-17.905781),
    new google.maps.LatLng(20.713383,-19.905781),
    new google.maps.LatLng(25.713383,-29.905781),

  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#dddd00",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  flightPath.setMap(map);

}
</script>

Thanks in advance, I am very new to googles API and to this site.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三月梨花 2024-12-29 06:59:33

尝试将点的位置添加到边界对象，然后使用 fitBounds，如下所示：

var bounds = new google.maps.LatLngBounds();

var point1 = new google.maps.LatLng(45.397, 5.644);
bounds.extend(point1);
var point2 = new google.maps.LatLng(28.713383,-17.905781);
bounds.extend(point2);
var point3 = new google.maps.LatLng(20.713383,-19.905781);
bounds.extend(point3);
var point4 = new google.maps.LatLng(25.713383,-29.905781);
bounds.extend(point4);

map.fitBounds(bounds);

Try adding positions of your points to a bounds object and then using fitBounds, something like this:

var bounds = new google.maps.LatLngBounds();

var point1 = new google.maps.LatLng(45.397, 5.644);
bounds.extend(point1);
var point2 = new google.maps.LatLng(28.713383,-17.905781);
bounds.extend(point2);
var point3 = new google.maps.LatLng(20.713383,-19.905781);
bounds.extend(point3);
var point4 = new google.maps.LatLng(25.713383,-29.905781);
bounds.extend(point4);

map.fitBounds(bounds);

回复收藏 0 原文

~没有更多了~