Google Maps API v3 自定义按钮四处移动答案

【问题标题】：Google Maps API v3 Custom Button moving aroundGoogle Maps API v3 自定义按钮四处移动
【发布时间】：2018-05-10 05:50:41
【问题描述】：

JSFiddle 重现问题。

我正在向地图的顶部中心添加一个自定义按钮。我在地图上附加了一个单击事件，该事件将在按钮中淡出。地图上的右键单击事件，将淡出按钮。

重现问题：

右键单击地图以淡出按钮。
将缩放级别增加/减少至少一级。
左键单击以淡入按钮。

此时按钮将在不同的位置淡入比原来的位置。

将缩放级别增加/减少至少一级。

然后您将看到按钮弹回其原始位置。

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>

【问题讨论】：

我在发布的代码 sn-p 中没有看到您的问题。该按钮要么隐藏，要么在顶部中心可见。更改缩放级别（通过单击地图）不会更改位置（尽管它会隐藏/显示按钮）
我应该补充一下，我正在 Chrome 中测试这个。你在 JSFiddle 中测试了吗？按照我列出的步骤，你无法重现问题吗？请提供反馈投票，这样我就可以解决您的疑虑。这是我遇到的一个容易重现的问题，我已经详细阐述了它。
这看起来像是Map 对象上的控制位置的潜在错误。作为一种解决方法，您可以尝试从Map 控件中删除右键单击按钮（稍微超时以完成淡出效果），然后在左键单击时将其读回地图。 Simple sample JSBin
@Preston 谢谢。这正是我正在寻找的类型。随时发布您的工作作为答案。

标签： javascript google-maps

【解决方案1】：

这看起来像是Map 对象上的控制位置的潜在错误。您可能想在 Google 的公共问题跟踪器上 file a bug。

作为一种解决方法，您可以尝试从Map 控件中删除rightclick 上的按钮（稍微超时以完成淡出效果），然后将其读回左侧的地图click .

Simple sample JSBin

<!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>

【讨论】：