谷歌地图未优化标记/fitBounds
Google Maps Unoptimized Marker / fitBounds
我正在使用Selenium编写验收测试,以测试使用Google Maps API的应用程序。为了测试映射标记的位置,我使用了未优化的标记和唯一的标题属性,使我能够针对标记元素(来自Selenium with XPath查询)。
我遇到了一个问题,当使用未优化的标记时,调用google.maps.Map.fitBounds()会导致标记从DOM中删除。您必须反复调用fitBounds()才能实现这一点这种情况只发生在未优化的标记上,并且应用程序本身按预期工作。
我写了一个简短的测试脚本在浏览器中复制:请运行下面的。
我也创造了一把小提琴。
我在API文档中没有看到任何相关内容。
任何帮助都会很棒。
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<style type="text/css">
#container {
width: 800px;
height:500px;
}
</style>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="container"></div>
<script type="text/javascript">
// Repeatedly click on 'Hide' then 'Show' (8+ times sometimes). At some point the markers disappear and not come back - even if the code for showing/hiding markers is entirely commented out.
// The issue seems to be with the map.fitBounds() call when un-optimized markers are being used.
// Note - un-optimized markers are needed for targeting marker HTML elements as part of an acceptance test.
// Replicated on: 45.0.2 Firefox; 49.0.2623.112 m Chrome.
function changeBounds(boolToggle) {
//return; // TODO - if you add this line in the problem is fixed.
var bounds = new google.maps.LatLngBounds();
var latLng = boolToggle ? new google.maps.LatLng(70, 70) : new google.maps.LatLng(30, 30);
bounds.extend(marker1.getPosition());
bounds.extend(marker2.getPosition());
bounds.extend(latLng);
map.fitBounds(bounds);
}
var mapOptions = {
center : { lat : 50, lng : 50 },
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("container"), mapOptions);
var marker1 = new google.maps.Marker({
position : {
lat : 51,
lng : 51,
},
title : "MARK1",
optimized : false
});
var marker2 = new google.maps.Marker({
position : {
lat : 52,
lng : 52,
},
title : "MARK2",
optimized : false
});
marker1.setMap(map);
marker2.setMap(map);
document.getElementById('show').onclick = function() {
//marker1.setVisible(true); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
//marker2.setVisible(true);
changeBounds(true);
}
document.getElementById('hide').onclick = function() {
//marker1.setVisible(false); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
//marker2.setVisible(false);
changeBounds(false);
}
</script>
</body>
</html>
编辑:我已经将此报告为Google的一个错误。看见https://code.google.com/p/gmaps-api-issues/issues/detail?id=9912
我不知道问题是什么,这肯定是Google Maps API中的一些问题,但我找到了一个解决方案:使用pan*方法。对我来说,最好的一个是使用panBy,它对地图说要按x和y像素平移。移动0像素效果很好,所以只需在fitBounds之后添加map.panBy(0,0)就可以修复消失的标记。
然而,这意味着失去了地图的渐进移动,所以我在空闲事件中使用了panBy。最终的解决方案是在创建地图后添加以下内容:
google.maps.event.addListener(map, 'idle', function() {
map.panBy(0,0);
});
我很抱歉,但是我没有足够的时间来筛选谷歌的API,看看问题出在哪里
什么不起作用:
- marker.setMap(或任何其他属性)
- 标记是否可拖动
- google.maps.event.trigger(map,'some_event')
相关:
- 谷歌地图API v3 SVG标记消失
- https://code.google.com/p/gmaps-api-issues/issues/detail?id=5716
与Siderite类似,我不知道如何直接修复错误。然而,我发现的一个变通方法是触发地图的"调整大小"事件:
google.maps.event.trigger(google_map, "resize");
- 以可优化的方式使用requirejs加载模板
- 使用优化器在慢速连接上加载main.js时需要js超时
- JavaScript数组优化以提高性能
- React+Redux性能优化与组件ShouldUpdate
- JavaScript尾部调用中的函数是否经过优化
- javascript中的快捷方式融合优化
- 如何优化循环以插入到数据库中
- Css优化谷歌页面速度洞察
- 什么's在javascript'的优化上下文
- JavaScript代码优化-创建可重用类
- 如何优化jquery动画代码
- 颗粒-JavaScript/CSS缩小SIMPLE/ADVANCED优化不起作用
- requirejs优化器错误:未定义窗口
- 如何优化这个jquery循环的执行时间
- 如何在AJAX驱动的应用程序中优化元素绑定
- 优化J$plus组合3<脚本>转换为1
- 未捕获的类型错误:无法读取属性'fitBounds'谷歌地图(markrWithlabel js)中未定
- 使用公共JS文档优化静态网站的CSS/JS导入
- 优化JavaScript代码
- 谷歌地图未优化标记/fitBounds