重新对齐Google地图，将所有标记符合地图右侧的70％ [英] Realign Google Maps to fit all markers into to the right 70% of the map

问题描述

我想为客户提供解决方案，以便在地图上显示一个城市中的所有分支机构（Google Maps JavaScript API）。该地图的行为更像一个网站内的应用程序，而不是一个典型的Google地图 - 它不是可拖动的，可缩放的等等。

我把一个小函数放在一起重新定位地图以在地图视口中具有所有标记。这个函数在pageload上调用，每次窗口调整大小。

虽然这个功能完美，但我需要更精细地调整这个脚本，这是我没有如何做到这一点：稍后，将会有一个永久的信息窗口覆盖地图的左侧30％。为防止标记隐藏在它下面，如果重新对齐函数可能被限制为仅使用地图对象的右侧70％进行计算，那将会很好。

下面是目前的功能：
$ b

  function realignMap（） {
 resizeFinished（function（）{
 var bounds = new google.maps.LatLngBounds（）; 
 for（var i = 0; i< markers.length; i ++）{
 bounds.extend（markers [i] .getPosition（））; 
} 
 map.fitBounds（bounds）; 
}，300，'mapresizeuniqueid'）; 
 
  

地图和标记是包含Google Maps地图对象和数组Google地图标记对象的全局变量。 resizeFinished 对于最大化和捕捉窗口将防止事件被触发的错误是一个很小的解决方法。

对于任何你可以提供的tipp！问候 - 乔纳森

PS：请不要提供jQuery解决方案（如果不需要的话）... 方案

我可以想到这个问题的两个解决方案：

1。其实想要。为什么你甚至在地图上显示div？当信息窗口存在时，为什么不缩小地图div？然后在信息窗口不存在时重新调整大小（小心：在执行任何这些操作后触发 resize 地图上的事件）如果您没有真正的理由这样做我建议你使用这个解决方案。

2。如果1.不可行，您可以创建一个假边界元素，与计算出的界限左侧处于适当的距离。例如。您的原始边界框 lng 始于 50 并以 70 。这意味着它的宽度是20， 20 * 0.3 = 6 所以你会在lng 50-6 = 44
$ p $ 函数realignMap（）{
resizeFinished（function（） {
var bounds = new google.maps.LatLngBounds（）;
for（var i = 0; i< markers.length; i ++）{
bounds.extend（markers [i] .getPosition（））;
}
var width = bounds.getSouthWest（）。lng（）> bounds.getNorthEast（）。lng（）？（180 - bounds.getSouthWest（）。lng ））+（bounds.getNorthEast（）。lng（） - （-180））：bounds.getSouthWest（）。lng（） - bounds.getNorthEast（）。lng（）;
if（width> 180 ）;
var new_lng = bounds.getSouthWest（）。lng（） - （width * 0.3）;
if（new_lng <-180）new_lng = 180 - （-180 - new_lng）;
bounds.extend（new google.maps.LatLng（bounds.getCenter（）。lat（），new_lng）;
map.fitBounds（bounds）;
}，300，'mapresizeuniqueid'）;
}


当然，如果您的标记覆盖更大的 lng 跨度超过70％编辑编辑代码以在bounds.getSouthWest（）.ng（）> bounds.getNorthEast（）。lng（）


I would like to provide a client with a solution for displaying all of the branches in one city on a map (Google Maps JavaScript API). The map behaves more like an in-website app than a typically Google Map - it is not draggable, zoomable, and so on.

I put together a tiny function that handles repositioning of the map to have all markers in the maps viewport. This function is called on pageload and everytime the window is resized.

While this works perfectly, I need to fine-tune this script even more and this is where I have no clue on how to do it: Later on, there will be an permanent info-window overlaying the left 30% of the map. To prevent markers from being hidden under it, it would be nice if the realign function could be restricted to use only the right 70% of the map object for calculation.

Here is what the funtion currently looks like:

function realignMap() {
  resizeFinished(function(){
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);
  }, 300, 'mapresizeuniqueid');
}

map and markers are global variables containing the Google Maps map-object and an array Google Maps marker-objects. resizeFinished is a small work-around for a bug where maximizing and snapping of the window will prevent the event from being fired.

Thanks in advance for any tipp you can provide! Greetings - Jonathan

P.S.: Please don't provide jQuery solutions if not necessary...

解决方案

I can think of two solutions to this problem:

1. shrink the map div to the size you actually want. Why do you even display a div over map? Why don't you just shrink the map div when the info-window is present? And then resize it back when info-window is not present (care: trigger resize event on map after you do any of those operations) If you have no actual reason to do this I suggest you to go with this solution.

2. If 1. is not viable for you can create a fake bounds element, which would be in the appropriate distance ti the left from the calculated bounds. E.g. your original bounding box lng starts at 50 and ends in 70. That means it's width is 20, 20*0.3=6 so you would create a fake element at lng 50-6=44 and fit map into those new bounds. So your code would look something like this (untested):

function realignMap() {
  resizeFinished(function(){
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    var width = bounds.getSouthWest().lng() > bounds.getNorthEast().lng() ? (180 - bounds.getSouthWest().lng()) + (bounds.getNorthEast().lng() - (-180)) : bounds.getSouthWest().lng() - bounds.getNorthEast().lng();
    if(width > 180);
    var new_lng = bounds.getSouthWest().lng() - (width * 0.3);
    if(new_lng < -180) new_lng = 180 - (-180 - new_lng);
    bounds.extend(new google.maps.LatLng(bounds.getCenter().lat(), new_lng);
    map.fitBounds(bounds);
  }, 300, 'mapresizeuniqueid');
}

Of course this wouldn't work if your markers are covering bigger lng span than 70% of whole earth.

EDIT Edited the code to work when bounds.getSouthWest().lng() > bounds.getNorthEast().lng()

这篇关于重新对齐Google地图，将所有标记符合地图右侧的70％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！