Google仅在特定区域标记标记 [英] Google maps marker only in a specific area

问题描述

 ＃map-canvas 
 {
身高：100％; 
位置：绝对; 
 top：0px; 
剩下：0; 
 right：0; 
 z-index：0; 
 
 
 
 
 
 $ b 
在这个画布的顶部有一个半透明的左边栏，在右侧使用 rails模型显示地图上的标记。现在，当我将视图连接到儿子结果数据时，某些标记位于边栏下方，但我希望所有标记都适合右边的区域。
 
 
 
发生了什么：
  
 
 
 
我想要什么：
  
解决方案
我假设你知道map.fitBounds（bounds）; 
 
 
你会在上面得到你的照片。 
现在，假设我们在地图上留下了一个额外的点（一个不可见的标记）。 
 
 
 
我们将计算该点应该在哪里。我们不会将它添加到标记中，但我们会将其添加到边界。
 
 
 
所以我只写了一个函数。您可以选择边栏的宽度。我将它设置为0.5（50％侧边栏），请参阅第29行。将其调整为您需要的值。 
 
 
 < style> ; 
 #map {
 height：400px; 
} 
< / style> 
< div id =map>< / div> 
 
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp>< / script> 
< script> 
地点= [
 [50.86721032255901,4.317024205042674]，
 [50.89585769377925,4.481363151385143]，
 [50.834376046898974,4.298433814360454]，
 [50.82280917273896,4.395368848158672] 
 ]。 
 
函数initialize（）{
 map = new google.maps.Map（document.getElementById（map），{$ b $ mapTypeId：google.maps.MapTypeId.ROADMAP， 
 center：new google.maps.LatLng（locations [0] [0]，locations [0] [1]），
 zoom：10 
}）; 
 for（var i = 0; i< locations.length; i ++）{
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（locations [ i] [0]，locations [i] [1]），
 map：map 
}）
} 
 setBoundsLeftSidebar（locations，0.5）; 
} 
 / ** 
 * @param mapFraction（float）：0.0到1.0;例如：0.6表示地图的40％被边栏覆盖，60％被地图覆盖
 * / 
函数setBoundsLeftSidebar（points，mapFraction）{
 //首先我们想知道min和最大经度
 var max = -180; 
 var min = 180; 
 //我们做出界限。边界是标记+左边的一个额外点（我们将给它一个点0的纬度），后面会看到
 var bounds = new google.maps.LatLngBounds（）; 
 for（var i = 0; i  if（points [i] [1]> max）{
 max = points [i] [1 ]。 
} 
 if（points [i] [1]  min = points [i] [1]; 
} 
 bounds.extend（new google.maps.LatLng（points [i] [0]，points [i] [1]））; 
} 
 //所以现在我们有最小值和最大值。 
 //我们在min 
的左边添加一个点var widthTotal =（max  -  min）/ mapFraction; 
 var pointExtremeLeft = max  -  widthTotal; 
 bounds.extend（new google.maps.LatLng（points [0] [0]，pointExtremeLeft））; 
 map.fitBounds（bounds）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  
 
I have a map-canvas which covers the entire screen.
#map-canvas
{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 0;
}
On top of this canvas there is a left sidebar which is translucent and the area on the right displays the marker on the map using rails model. Now when I connect my views to the son result data, some of the markers are below the sidebar but I want all the markers to adjust to the area on the right.


What is happening:


What I want:
解决方案
I presume you know map.fitBounds(bounds);

If you feed the markers as bounds, you will get your picture above.
Now, imagine we have an extra point (an invisible marker) left on the map.  

We will calculate where that point is supposed to be. we don't add it to the markers but we add it to bounds.

So I just wrote a function.  You can choose the width of the sidebar.  I set it to 0.5 (50% sidebar), see line 29.  Adapt this to the value you need.
<style>
#map {
  height: 400px;
}
</style>
<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
  locations = [
    [50.86721032255901,4.317024205042674],
    [50.89585769377925,4.481363151385143],
    [50.834376046898974,4.298433814360454],
    [50.82280917273896,4.395368848158672]
  ];

  function initialize() {
    map = new google.maps.Map(document.getElementById("map"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(locations[0][0], locations[0][1]),
      zoom: 10
    });
    for (var i=0; i<locations.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      })
    }
    setBoundsLeftSidebar(locations, 0.5);
  }
  /**
  * @param mapFraction (float): 0.0 to 1.0 ; example: 0.6 means 40% of the map is covered by the sidebar, 60% by the map
  */
  function setBoundsLeftSidebar(points, mapFraction) {
    // first we want to know min and max longitude
    var max = -180;
    var min = 180;
    // We make bounds.  The bounds are the markers + an extra point on the left (we will give it a latitude of point 0), see later
    var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<points.length; i++) {
      if(points[i][1] > max) {
        max = points[i][1];
      }
      if(points[i][1] < min) {
        min = points[i][1];
      }
      bounds.extend(new google.maps.LatLng(points[i][0], points[i][1]));
    }
    // So now we have min and max.  
    // we add a point to the left of min
    var widthTotal = (max - min) / mapFraction;
    var pointExtremeLeft = max - widthTotal;
    bounds.extend(new google.maps.LatLng(points[0][0], pointExtremeLeft));
    map.fitBounds(bounds);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>


                        
这篇关于Google仅在特定区域标记标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！