gpt4 book ai didi

javascript - Google map Javascript - 未调用调整大小事件监听器

转载 作者:行者123 更新时间:2023-12-03 09:03:18 41 4
gpt4 key购买 nike

我在隐藏的 div 中有一张 map ,按下按钮即可显示该 map 。我最初遇到了问题,但通过触发调整大小事件解决了这些问题。我现在的问题是 map 没有以我初始化 map 的位置为中心。

我想将 map.setCenter(?) 调用添加到调整大小或边界更改事件监听器中,但它们似乎从未被调用。我已经在每个警报中设置了警报来进行测试,但没有任何反应。

编辑:按要求示例...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#theButton {
position: absolute;
top: 0;
left: 400px;
padding: 10px;
background-color: orange;
z-index: 100;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="theButton" onclick="resizeMap();">Click Me</div>

<div id="map"></div>

<script>
function initMap() {
var myLatLng = {lat: 51.320151, lng: -0.555658};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Test Location!'
});

var getCen = map.getCenter();

var currentMapCenter = null;
google.maps.event.addListener(map, 'resize', function () {
currentMapCenter = map.getCenter();
alert("Resizing");
});

google.maps.event.addListener(map, 'bounds_changed', function () {
if (currentMapCenter) {
// react here
map.setCenter(currentMapCenter);
alert("Centering");
}
currentMapCenter = null;
});
}

function resizeMap() {
alert("Clicked");
google.maps.event.trigger(map, 'resize');
};
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>

</body>
</html>

最佳答案

我已经更深入地测试了您的代码,var map 的范围存在问题以这种方式更改声明(在函数 initMap 本地范围之外的窗口范围内)

<script> 
var map;

function initMap() {
var myLatLng = {lat: 51.320151, lng: -0.555658};

map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
........
......

否则 map 无法在其他函数中正确引用,例如:

function resizeMap() {
google.maps.event.trigger(map, 'resize');

在此函数中,如果不更改 var 声明映射,则不会被引用,并且不会触发任何内容

关于javascript - Google map Javascript - 未调用调整大小事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32249307/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com