ChatGPT解决这个技术问题 Extra ChatGPT

Google Map API v3 — 设置边界和中心

我最近切换到 Google Maps API V3。我正在研究一个从数组中绘制标记的简单示例,但是我不知道如何相对于标记自动居中和缩放。

我搜索了网络高低,包括谷歌自己的文档,但没有找到明确的答案。我知道我可以简单地取坐标的平均值,但是我将如何相应地设置缩放?

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));


      var lat = map.getCenter().lat(); 
      var lng = map.getCenter().lng();      


  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

K
Kevin Workman

是的,您可以声明新的 bounds 对象。

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

然后对于每个标记,扩展您的边界对象:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API:google.maps.LatLngBounds


你也可以添加这个 map.setCenter(bounds.getCenter());
拉曼的回答和评论都有助于减少我对所需内容的关注。
@Sam152:您可能对 500 rep bounty for a related question 感兴趣。
为什么每次添加一个点时触发 map.fitBounds(bounds);,而不是最后一次?
c
cincodenada

一切都已排序 - 请参阅最后几行代码 - (bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}

谢谢! 3.0 文档对于这个功能的去向非常模糊。
3.0 文档对于很多事情的去向都非常模糊。 :(
对不起,这是在错误的地方。它是对所选答案的评论。但是扩展函数不需要在你的 for 循环中吗?
您好,很棒的代码,但是可以增强此代码以避免“在此缩放级别没有可用的图像”。因为此代码不考虑缩放级别,所以它确实显示了所有标记,但我个人更希望看到较低的缩放以避免“无图像......”消息。请问有什么想法吗?
这些是“bounds.extend(myLatLng); map.fitBounds(bounds);”吗?也适用于Android?
H
Hossein

答案非常适合调整标记的地图边界,但如果您想为多边形和圆形等形状扩展 Google 地图边界,您可以使用以下代码:

对于圈子

bounds.union(circle.getBounds());

对于多边形

polygon.getPaths().forEach(function(path, index)
{
    var points = path.getArray();
    for(var p in points) bounds.extend(points[p]);
});

对于矩形

bounds.union(overlay.getBounds());

对于折线

var path = polyline.getPath();

var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();

for(var i = 1; i < path.getLength(); i++)
{
    var e = path.getAt(i);
    slat = ((slat < e.lat()) ? slat : e.lat());
    blat = ((blat > e.lat()) ? blat : e.lat());
    slng = ((slng < e.lng()) ? slng : e.lng());
    blng = ((blng > e.lng()) ? blng : e.lng());
}

bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));

l
localtime

我对 google maps api v3 的建议是(不要认为它可以更有效地完成):

gmap : {
    fitBounds: function(bounds, mapId)
    {
        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    }
}

结果,您将适合地图窗口中的所有点。

示例完美运行,您可以在此处随意查看www.zemelapis.lt


如果 boundsnull,您可以 maps[ mapId ].getBounds() 而不是返回 false
@localtime 实际上,您的网站需要 Google Maps API 密钥才能工作
S
Sebastien

setCenter() 方法仍然适用于不存在 fitBounds() 的最新版 Maps API for Flash。


K
Khayer

使用以下一种,

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));


这适用于 Google Maps API v2
您需要提供更深思熟虑的解决方案。我相信这适用于 Google Maps v2。

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅