[英]Center marker after resize using javascript tabs
I have a problem centering the marker for a google map I have on site. 我在将网站上的Google地图的标记居中时遇到问题。
The map is in a javascript tab and is triggered to resize after activating the tab so that it will reload and appear, thus: 该地图位于javascript标签中,并在激活标签后触发调整大小,以便重新加载并显示,因此:
<li>
<a href="#" class="button tablinks" onclick="openTab(event, 'contact');resetMap();"><span class="topnavlinks">Contact</span></a>
</li>
function resetMap() {
google.maps.event.trigger(map, 'resize');
}
It'll reset to size, but just like I've read in countless places it won't reset to centre the marker. 它会重置为大小,但是就像我在很多地方阅读过一样,它不会重置以使标记居中。 I have tried various answers that I've managed to find but still cannot find a solution to this problem! 我尝试了各种设法找到的答案,但仍然找不到解决该问题的方法!
My tabs code: 我的标签代码:
<script><!-- tabs -->
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
And my map code (just without the styles): 还有我的地图代码(只是没有样式):
function initMap() {
var theoneway = {lat: 9.700082, lng: 100.02203};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: theoneway
});
var marker = new google.maps.Marker({
position: theoneway,
map: map
});
}
And finally the html: 最后是html:
<div class="container-fluid">
<div id="map" style="height:500px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=(mykeyishere)&callback=initMap"
async defer></script>
</div>
A working version can be found here: http://theoneway.asia/bench/ 可以在这里找到工作版本: http : //theoneway.asia/bench/
I hope that's enough information, and I massively appreciate any help and advice! 我希望这是足够的信息,非常感谢您的帮助和建议!
I've fixed this with the listen event in my map js file in case anyone else has this same issue: 我已通过我的地图js文件中的listen事件修复了此问题,以防其他人遇到相同的问题:
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.