谷歌地图V3自定义标记图像和fitBounds（）

我想让我的自定义标记显示在我的地图上后，我已经使用fitBounds（）方法来适应标记本身的地图边界。谷歌地图V3自定义标记图像和fitBounds（）

我已经通过遍历标记数组来完成此操作，然后扩展映射的边界以合并标记坐标。

这适用于股票谷歌地图标记。但是，我的客户想要为其网站使用相当大（36px x 57px）的标记图像。如何在拟合地图边界时对此进行补偿？

在使用自定义标记图像的时刻，它们并不全都适合在边界集内。

2012-05-20 RyanP13

便宜的答案是在fitBounds（）后总是缩小一个级别。但我们可以做得更好一点。

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

我的黑客利用了一个函数来测量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-20 19:49:18

由于您已经计算了边界，因此您可能需要扩展边界以添加足够的缓冲区以包含大图像。你可以用这种方法计算或扩展边界的公式称为凸包; Computational Geometry Algorithms Library在2D Convex Hull Algorithms上有一个部分，或者有一个JavaScript Quickhull Article，其中还包括一个靠近页面底部的漂亮的在线示例。希望这是有帮助的 -

来源

2012-05-20 19:07:17

谷歌地图V3自定义标记图像和fitBounds（）

回答

相关问题