使用fitbounds时，请在地图范围内打开infowindows [英] Include open infowindows within bounds of map, when using fitbounds

查看：76
本文介绍了使用fitbounds时，请在地图范围内打开infowindows的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含多个infowindows标记的地图。 infowindows需要在页面加载时打开。该地图使用setbounds进行居中以合并所有标记，这些标记可以工作，但它也需要将infowindows包含在边界内。目前，infowindows已被裁剪到位。

JS： 

 函数initialize（）{
 var map = new google.maps.Map（document.getElementById（'map-canvas'））; 
 var bounds = new google.maps.LatLngBounds（）; 
 var myLatlng1 = new google.maps.LatLng（51.525209，-0.09402479999994284）
 var contentString1 ='< div class =map-content>< p> Test1< br /> dsfasdf< ; dsfasdf< dsfasdf< br /> dsfasdf< br> dsfasdf< dsfasdf< / p>< / div>'
 var infowindow1 =新的Google。 maps.InfoWindow（{content：contentString1}）; 
 var marker1 = new google.maps.Marker（{position：myLatlng1，map：map，title：'Test1'}）; 
 
 google.maps.event.addListener（marker1，'click'，function（）{infowindow1.open（map，marker1）;}）; 
 infowindow1.open（map，marker1）; 
 bounds.extend（myLatlng1）; 
 
 var myLatlng2 = new google.maps.LatLng（51.52106840183588，-0.10866641049801729）
 var contentString2 ='< div class =map-content>< p>< br /> dsfasdf< br /> dsfasdf< br /> dsfasdf< br> dsfasdf< dsfasdf< / p>< / div>'
 var infowindow2 = new google.maps。 InfoWindow（{content：contentString2}）; 
 var marker2 = new google.maps.Marker（{position：myLatlng2，map：map，title：'Test2'}）; 
 google.maps.event.addListener（marker2，'click'，function（）{infowindow2.open（map，marker2）;}）; 
 infowindow2.open（map，marker2）; 
 bounds.extend（myLatlng2）
 
 //将这些边界放到地图上
 map.fitBounds（bounds）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）;

CSS： 

 ＃map-canvas {width：100％; height：520px; }

你可以在这里看到一个小提琴： http://jsfiddle.net/mKKVM/



任何人都可以建议如何让infowindows在界限内？ 感谢人们。 http://jsfiddle.net/H7bPE/4/ =noreferrer> jsfiddle


  1. 显示地图通常

  2. 计算从标记锚点到infowindow上边缘的像素距离
  3. 计算从标记锚点到左边缘的像素距离计算从标记锚点到infowindow右边缘的像素距离
  4. 使用两个点来扩展原始边界点边界的右边加上infowindow的宽度的一半，边界的顶部加上infowindow的高度。
  5. 扩展原始b从界限左角减去两点，减去infowindow宽度的一半，界限的顶部加上infowindow的高度。

  6. 使映射符合新的界限。

大概可以使用3点顶部中心，左中心和右中心，这是第一次切割，概念证明，可能可以清理和提炼。 

 函数initialize（）{
 var map = new google.maps。地图（的document.getElementById（ '地图画布'））; 
 var projection = null; 
 google.maps.event.addListener（map，'projection_changed'，function（）{
 projection = map.getProjection（）; 
}）; 
 
 var bounds = new google.maps.LatLngBounds（）; 
 if（！projection）
 google.maps.event.addListener（map，'idle'，computeBounds）; 
 else 
 computeBounds（）; 
 
 var myLatlng1 = new google.maps.LatLng（51.525209，-0.09402479999994284）; 
 bounds.extend（myLatlng1）; 
 var myLatlng2 = new google.maps.LatLng（51.52106840183588，-0.10866641049801729）; 
 bounds.extend（myLatlng2）; 
 //将这些边界放到地图上
 map.fitBounds（bounds）; 
 
函数computeBounds（）{
 
 var contentString1 ='< div class =map-content>< p> Test1< br /> dsfasdf< br /> dsfasdf< br /> dsfasdf< br /> dsfasdf< br> dsfasdf< dsfasdf< / p>< / div>'
 var infowindow1 =新的google.maps。 InfoWindow（{content：contentString1}）; 
 var marker1 = new google.maps.Marker（{position：myLatlng1，map：map，title：'Test1'}）; 
 
 google.maps.event.addListener（marker1，'click'，function（）{
 infowindow1.open（map，marker1）; 
}）; 
 infowindow1.open（map，marker1）; 
 google.maps.event.addListenerOnce（infowindow1，'domready'，calcInfoWindowBounds）; 
 
 var contentString2 ='< div class =map-content>< p>< br /> dsfasdf< br /> dsfasdf< br / > dsfasdf< br /> dsfasdf< / p>< / div>'
 var infowindow2 = new google.maps.InfoWindow（{content：contentString2}）; 
 var marker2 = new google.maps.Marker（{position：myLatlng2，map：map，title：'Test2'}）; 
 google.maps.event.addListener（marker2，'click'，function（）{
 infowindow2.open（map，marker2）; 
}）; 
 infowindow2.open（map，marker2）; 
 
 google.maps.event.addListenerOnce（infowindow2，'domready'，calcInfoWindowBounds）; 
 
函数calcInfoWindowBounds（）{
 domEls = document.getElementsByClassName（'map-content'）; 
 var markerSpace = 32 + 8; 
 var maxTop = 0; 
 var maxLeft = 0; 
 var maxRight = 0; 
 for（var i = 0; i< domEls.length; i ++）{
 var topOfWindow = domEls [i] .offsetHeight + markerSpace; 
 var leftOfWindow = domEls [i] .offsetWidth / 2; 
 var rightOfWindow = domEls [i] .offsetWidth / 2; 
 
 if（topOfWindow> maxTop）maxTop = topOfWindow; 
 if（leftOfWindow> maxLeft）maxLeft = leftOfWindow; 
 if（rightOfWindow> maxRight）maxRight = rightOfWindow; 
} 
 
 var leftBounds = projection.fromLatLngToPoint（new google.maps.LatLng（bounds.getNorthEast（）。lat（），bounds.getSouththWest（）。lng（）））; 
 var rightBounds = projection.fromLatLngToPoint（new google.maps.LatLng（bounds.getNorthEast（）））; 
 var topBounds0 = rightBounds.y + maxTop; 
 var rightBounds0 = rightBounds.x + maxRight; 
 var leftBounds0 = leftBounds.x  -  maxLeft; 
 bounds.extend（projection.fromPointToLatLng（leftBounds0，topBounds0））; 
 bounds.extend（projection.fromPointToLatLng（rightBounds0，topBounds0））; 
 map.fitBounds（bounds）; 
} 
 
} 
 
} 
 google.maps.event.addDomListener（window，'load'，initialize）;


I have a map which contains multiple markers with infowindows. The infowindows need to be open on page load. The map is being centered using setbounds to incorporate all of the markers, which works, but it also needs to include the infowindows within the bounds. Currently the infowindows are cropped in places.

JS:

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284)
    var contentString1 = '<div class="map-content"><p>Test1<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {infowindow1.open(map,marker1);});
    infowindow1.open(map,marker1);
    bounds.extend(myLatlng1);

    var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729)
    var contentString2 = '<div class="map-content"><p><br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {infowindow2.open(map,marker2);});
    infowindow2.open(map,marker2);
    bounds.extend(myLatlng2)

    //  Fit these bounds to the map
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

CSS:

#map-canvas { width: 100%; height: 520px; }

You can see a fiddle here: http://jsfiddle.net/mKKVM/

Can anyone suggest how to get the infowindows inside the bounds?

Thanks folks.

解决方案

Proof of concept jsfiddle

  1. Display the map normally
  2. Calculate the pixel distance from the marker anchor to the upper edge of the infowindow
  3. Calculate the pixel distance from the marker anchor to the left edge of the infowindow
  4. Calculate the pixel distance from the marker anchor to the right edge of the infowindow
  5. Extend the the original bounds with two points made from the right corner of the bounds plus half the width of the infowindow and the top of the bounds plus the height of the infowindow.
  6. Extend the the original bounds with two points made from the left corner of the bounds minus half the width of the infowindow and the top of the bounds plus the height of the infowindow.
  7. fit the map to the new bounds.

Probably can be refined to use 3 points top center, left center and right center, this is a first cut, proof of concept, can probably be cleaned up and refined.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'));
  var projection = null; 
  google.maps.event.addListener(map,'projection_changed', function() {
    projection = map.getProjection();
  }); 

  var bounds = new google.maps.LatLngBounds();
  if (!projection) 
    google.maps.event.addListener(map, 'idle', computeBounds);
  else 
    computeBounds();

  var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284);
  bounds.extend(myLatlng1);
  var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729);
  bounds.extend(myLatlng2);
  //  Fit these bounds to the map
  map.fitBounds(bounds);

  function computeBounds() {    

    var contentString1 = '<div class="map-content"><p>Test1<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {
      infowindow1.open(map,marker1);
    });
    infowindow1.open(map,marker1);
    google.maps.event.addListenerOnce(infowindow1,'domready',calcInfoWindowBounds); 

    var contentString2 = '<div class="map-content"><p><br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map,marker2);
    });
    infowindow2.open(map,marker2);

    google.maps.event.addListenerOnce(infowindow2,'domready',calcInfoWindowBounds); 

    function calcInfoWindowBounds(){
      domEls = document.getElementsByClassName('map-content');
      var markerSpace = 32+8;
      var maxTop = 0;
      var maxLeft = 0;
      var maxRight = 0;
      for (var i=0; i<domEls.length; i++) {
        var topOfWindow = domEls[i].offsetHeight + markerSpace;
        var leftOfWindow = domEls[i].offsetWidth/2;
        var rightOfWindow = domEls[i].offsetWidth/2;

        if (topOfWindow > maxTop) maxTop = topOfWindow;
        if (leftOfWindow > maxLeft) maxLeft = leftOfWindow;
        if (rightOfWindow > maxRight) maxRight = rightOfWindow;
      }

      var leftBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouththWest().lng()));
      var rightBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast()));
      var topBounds0 = rightBounds.y + maxTop;
      var rightBounds0 = rightBounds.x + maxRight;
      var leftBounds0 = leftBounds.x - maxLeft;
      bounds.extend(projection.fromPointToLatLng(leftBounds0,topBounds0));
      bounds.extend(projection.fromPointToLatLng(rightBounds0,topBounds0));
      map.fitBounds(bounds);
    }   

  }

}
google.maps.event.addDomListener(window, 'load', initialize);

这篇关于使用fitbounds时，请在地图范围内打开infowindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆