JSFiddle重现问题。
我正在 map 的顶部中心添加一个自定义按钮。我在 map 上附加了一个单击事件，该事件将在按钮中淡出。 map 上的右键单击事件将使按钮淡出。
要重现该问题:
- 右键单击 map 即可淡出按钮。
- 将缩放级别增加/减少至少一级。
- 左键单击淡入按钮。
此时按钮将在不同的位置淡出 比原来的位置。
然后您将看到按钮弹回其原始位置。
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(41.508742, -0.120850),
zoom: 7,
disableDefaultUI: true
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var btn = document.getElementById('myButton');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
map.addListener('click', function() {
jQuery('#myButton').fadeIn();
});
map.addListener('rightclick', function() {
jQuery('#myButton').fadeOut();
});.button {
display: block;
}
#map {
width: 300px;
height: 300px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="map"></div>
<button class="button" id="myButton">asdf</button>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>最佳答案
这看起来像是 Map 对象上的控制位置的潜在错误。您可能想要file a bug在 Google 的公共(public)问题跟踪器上。
作为解决方法，您可以尝试从 Map 控件中删除右键单击 上的按钮(稍微超时以让淡出效果完成)，然后读取它返回左侧 map 点击。
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Custom Controls</title>
<style>
.button {
display: block;
width: 70px;
}
#map {
width: 300px;
height: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY" async defer></script>
<script>
function initMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(41.508742, -0.120850),
gestureHandling: 'greedy',
zoom: 7,
disableDefaultUI: true
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var btn = document.getElementById('myButton');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
map.addListener('click', function() {
if (!jQuery('#myButton').is(":visible")) {
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
jQuery('#myButton').fadeIn();
}
});
map.addListener('rightclick', function() {
if (jQuery('#myButton').is(":visible")) {
jQuery('#myButton').fadeOut();
setTimeout(function(){ map.controls[google.maps.ControlPosition.TOP_CENTER].pop(btn); }, 500)
}
});
}
</script>
</head>
<body>
<div id="map"></div>
<button class="button" id="myButton">asdf</button>
</body>
</html>
关于javascript - Google Maps API v3 自定义按钮四处移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50237414/