1

在我使用 fitBounds() 方法将地图的边界拟合到标记本身之后，我试图让我的自定义标记显示在我的地图上。

我通过循环标记数组然后扩展地图的边界以合并标记坐标来完成此操作。

这适用于库存谷歌地图标记。但是，我的客户希望为他们的网站使用相当大的（36 像素 x 57 像素）标记图像。在拟合地图的边界时如何弥补这一点？

目前使用自定义标记图像时，它们并不都适合设置的边界。

4

2 回答 2

3

由于您已经计算了边界，您可能只需要扩展边界以添加足够的缓冲区来包含大图像。可以用这种方式计算或扩展边界的公式称为凸包。计算几何算法库有一个关于2D Convex Hull 算法的部分，或者有一个JavaScript Quickhull 文章，在页面底部附近还包括一个漂亮的在线示例。希望这会有所帮助-

于 2012-05-20T19:07:17.713 回答
1

便宜的答案是总是在 fitBounds() 之后缩小一级。但我们可以做得更好一点。

我喜欢写黑客。在这里，我假设标记的大小永远不会大于 36x57。我测试了一段时间，发现fitBounds()边缘和最近的标记之间留有大约 42 px 的边距（可能不在手机上），而且我还假设您没有重新定位标记，也就是说，它将始终显示在给定的坐标位置之上。如果图标跑到另一边，则需要进行调整。

我的 hack 利用了一个测量 LatLng 像素位置的函数（使用容器版本，我在这里读到 div 版本在边界变化时不可靠）。

因为我们知道图标的高度以及最上面的标记在哪里，所以如果确定地图不在屏幕上，我们可以将地图向南平移一点。如果下面没有足够的边距，唯一的选择是缩小。我唯一担心的是它会很生涩，因为它需要两个事件：fitBounds 和自定义平移/缩放。那么唯一的答案就是重写一个自定义的fitBounds。当我手动测试时，事件运行顺利。

http://jsfiddle.net/sZJjY/

单击添加猫图标，右键单击触发调整大小/平移。

示例：放置 3-4 只小猫，单击鼠标右键，然后故意放置另一个从顶部脱落的小猫，再次单击鼠标右键。

  function fitIcons() {
    var left = 180.0;
    var right = -180.0;
    var top = -90.0;
    var bottom = 90.0;

    for (var i = 0; i < markers.length; i++) {
      curlat = markers[i].getPosition().lat();
      curlng = markers[i].getPosition().lng();
      if(curlat > top)    { top = curlat; }
      if(curlat < bottom) { bottom = curlat; }
      if(curlng > right)  { right = curlng; }
      if(curlng < left)   { left = curlng; }
    }

    var overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);

    map.fitBounds(new google.maps.LatLngBounds(
      new google.maps.LatLng(bottom, left),
      new google.maps.LatLng(top, right)));

    topPixels = overlay.getProjection().fromLatLngToContainerPixel(
                  new google.maps.LatLng(top, right));

    bottomPixels = overlay.getProjection().fromLatLngToContainerPixel(
                  new google.maps.LatLng(bottom, left));

    topGap = topPixels.y;
    bottomGap = $("#map_canvas").height() - bottomPixels.y;

    if(topGap < iconHeight) {
      if(bottomGap > iconHeight) {
        map.panBy(0, topGap);
      }
      else {
        map.setZoom(map.getZoom() - 1);
      }
    }
  }
于 2012-05-20T19:49:18.887 回答