谷歌地图V3自定义标记图像和fitBounds（） [英] Google maps V3 custom marker images and fitBounds()
问题描述
我试图让我的自定义标记出现在我的地图上后，我已经使用fitBounds（）方法来适应地图的界限。
我已经通过遍历标记数组来完成这项工作，然后扩展地图的边界以合并标记坐标。
这适用于股票谷歌地图标记。但是，我的客户想要为其网站使用相当大（36px x 57px）的标记图像。在拟合地图的边界时，我该如何弥补这一点？
在使用自定义标记图像时，它们并不全都适合在边界集内。 p>
便宜的答案是在fitBounds（）之后总是缩小一个级别。但我们可以做得更好一些。
我喜欢写黑客。在这里我假设你的标记尺寸永远不会大于36x57。我测试了一段时间，发现 fitBounds（）在边缘和最接近的标记之间留下了大约42像素的边距（可能不在手机上），而且我也是假设您不重新定位标记，也就是说，它总是显示在给定坐标位置上方。如果图标跑到另一边，需要进行调整。
我的黑客利用一个函数来测量LatLng的像素位置（使用容器版本I阅读这里，div版本是不可靠的边界变化）。
因为我们知道图标的高度，并且最上面的标记是哪里，我们可以平移地图如果它确定是离屏的话，它有点偏南。如果下面没有足够的保证金，唯一的选择是缩小。我唯一担心的是它会因为它需要两个事件而发生抖动：fitBounds和自定义平移/缩放。唯一的答案就是重写一个自定义的fitBounds。当我手动测试时，事件顺利进行。
点击添加猫图标，右键点击触发调整大小/平移。
示例：放置3-4个小猫，右键单击，然后特意放置另一个放在顶部的鼠标，再次右键单击。
函数fitIcons（）{
var left = 180.0;
var right = -180.0;
var top = -90.0;
var bottom = 90.0; （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
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（
google.maps.LatLng（bottom，left））;
topGap = topPixels.y;
bottomGap = $（＃map_canvas）。height（） - bottomPixels.y; （topGap< iconHeight）{
if（bottomGap> iconHeight）{
map.panBy（0，topGap）;
if
}
else {
map.setZoom（map.getZoom（） - 1）;
}
}
}
I am trying to get my custom markers to show up on my map after i have used the fitBounds() method to fit the boundaries of the map to the markers themselves.
I have done this by looping over the markers array and then extending the boundaries of the map to incorporate the marker co-ordinates.
This works fine with the stock google maps markers. However, my client wants to use quite large (36px by 57px) marker images for their site. How do i compensate for this when fitting the boundaries of the map?
At the moment when using the custom marker images they do not all fit inside the boundaries set.
The cheap answer is to always zoom out one level after fitBounds(). But we can do a bit better.
I like writing hacks. Here I am making the assumption that the size of your marker will never be larger than 36x57. I tested a while back to find that fitBounds() leaves a margin of around 42 px between the edge and the closest marker (maybe not on mobiles), and I'm also assuming you are not repositioning the marker, that is, it will always be displayed above the given coordinate position. If icons run off to the other sides, adjustments are needed.
My hack takes advantage of a function that measures the pixel position of a LatLng (using the container version, I read here that the div version is not reliable with bounds changes).
Since we know the height of the icon, and where the topmost marker is, we can pan the map south a bit if it's determined to be offscreen. In case there's not enough margin below, the only option is to zoom out. My only concern is it will be jerky because it calls for two events: fitBounds and the custom panning/zooming. The only answer then would be to rewrite a custom fitBounds. When I tested manually the events ran smoothly.
Click to add cat icons, right-click to trigger the resize/panning.
Example: place 3-4 kitties, right-click, then purposely place another that goes off the top, right-click again.
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);
}
}
}
这篇关于谷歌地图V3自定义标记图像和fitBounds（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
