- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一张 map ,其中包含带有信息窗口的多个标记。信息窗口需要在页面加载时打开。使用 setbounds 将 map 居中以合并所有标记,这是可行的,但它还需要在边界内包含信息窗口。目前,信息窗口在某些地方被裁剪。
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);
#map-canvas { width: 100%; height: 520px; }
最佳答案
概念证明 jsfiddle
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);
关于google-maps - 使用 fitbounds 时,在 map 范围内包括打开的信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21002001/
我的 Leaflet map JavaScript 如下,在底部附近您将看到我的 fitBounds() 定义。 问题是我不明白如何准确使用它,或者将它放在代码中的何处以使其工作(即缩放以包含所有标记
我正在使用 Leaflet 和 Mapbox,我想设置 map 的 View : 所有标记均可见 中心设置为特定点 使用 setView 和 fitbounds 单独完成每个点很容易,但我不知道如何同
当我初始化 map 时,我向 map 添加 1 个标记。当我缩小 map 时,我可以在 map “副本”上多次看到添加的标记。 当我搜索某个位置时, map 会添加一个新标记。之后,我使用 fitBo
我正在使用 Selenium 编写验收测试来测试使用 Google Maps API 的应用程序。为了测试 map 标记的位置,我是 using un-optimized markers和独特的标题属
我有一个谷歌地图边界函数运行如下: function intializeCustom() { var map = new google.maps.Map(document.getElement
我正在尝试在传单 map 中设置 fitBounds 选项,如下所示: var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.
我知道如果边界发生变化,就会触发一个 bounds_changed 事件,但是我需要知道 fitBounds 何时完成(当边界发生变化或边界保持不变时)。 谷歌有某种容忍度,如果边界变化很小,它实际上
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我正在使用 fitbound 函数在 map 的折线上自动缩放。但第一次如果我更改图表数据并再次调用相同的函数,它就无法正常工作,它就可以正常工作。函数代码如下。 var mapOptions = {
下面的代码工作正常,只是它没有缩放到给定的点。 如果我直接使用 Latlng,它就可以工作,无需将地址转换为 Latlng。 我需要将地址转换为 latlng,因为我是从数据库中获取地址的。 有人知道
我目前只能使用 google map v3。我尝试以这种方式手动添加边界,但它不起作用!? map.fitBounds((53.399999, 9.73215099999993), (53.71714
我只是想澄清一下我的理解方式是否正确。在我的 Google map 应用中,我想向我的用户显示来自特定大陆的标记。 问题:Google Map API 中的边界是由不多于两个点(标记)构成的区域,我说
新编码器尝试在我的 View 中调整 GoogleMap。 我查了很多资料,得出了这个结论,但对我不起作用。 覆盖 func loadView() { var markerList = [GM
我有两种类型的搜索来在 map 上放置标记。一个搜索基于来自输入表单的搜索查询触发,另一个在 moveend 事件上触发(即“在 map 移动时重做搜索”)。结果数据不一样;前者使用半径,后者限制在范
我的代码: if(!bounds.isEmpty()) { map.fitBounds(bounds); if (map.getZoom() > 11) { map.s
我对 googlemaps fitBounds 函数有疑问。 for (var i = 0; i Google Maps LatLngBounds.extend() Demo
我在我们的应用程序中使用 mapbox。执行 this.map.fitBounds(bound value) 将缩小或放大 map 以绑定(bind)指定值。在调用 this.map.fitBound
在这里,我的 javascript 代码在 map 中呈现标记,然后是该 map 的 fitBounds。 map 边界根据geojson得到拟合,但问题是当有任何标记时 在 map 上,我尝试适应绑
如何避免 this.map.fitBounds() 缩小?执行 this.map.fitBounds 将放大或缩小 map 以适合边界值。我想避免 fitBounds 的缩小功能。我怎样才能做到这一点
如果我在 Google map 上添加带有标签的标记,然后调用 fitBounds 到另一个区域,我仍然会继续看到没有标记的标签,除非缩小。这是一个错误吗? 这是一个工作 fiddle ,尝试单击 M
我是一名优秀的程序员,十分优秀!