Javascript 谷歌地图API v3自定义按钮四处移动_Javascript_Google Maps

Javascript 谷歌地图API v3自定义按钮四处移动

javascript google-maps

Javascript 谷歌地图API v3自定义按钮四处移动,javascript,google-maps,Javascript,Google Maps,复制问题我正在地图的顶部中心添加一个自定义按钮。我在地图上附加了一个单击事件，该事件将在按钮中消失。地图上的右键单击事件将淡出按钮复制该问题：右键单击地图以淡出按钮。将缩放级别至少增加/减少一个级别。左键单击以淡入该按钮。此时按钮将在不同位置淡入比它原来的位置将缩放级别至少增加/减少一个级别。然后，您将看到按钮弹回到其原始位置 var mapCanvas=document.getElementByIdmap；变量映射选项={ 中心：新google.maps.LatLng41

复制问题

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

复制该问题：

右键单击地图以淡出按钮。将缩放级别至少增加/减少一个级别。左键单击以淡入该按钮。此时按钮将在不同位置淡入比它原来的位置

将缩放级别至少增加/减少一个级别。然后，您将看到按钮弹回到其原始位置

这看起来像是Map对象上控件位置的潜在错误。你可能想在谷歌的公共问题追踪器上搜索

作为一种解决方法，您可以尝试在稍微超时的情况下从贴图控件中删除右键单击按钮，以完成淡出效果，然后在左键单击时将其读回贴图

我在发布的代码片段中没有看到您的问题。按钮在顶部中心隐藏或可见。通过点击地图来改变缩放级别不会改变位置，尽管它确实隐藏/显示了我应该添加的按钮，我在Chrome中测试了这一点。您在JSFIDLE中测试过它吗？您是否无法按照我列出的步骤重现问题？请为否决票提供反馈，以便我可以解决您的问题。这是我正在经历的一个很容易重现的问题，我已经非常详细地阐述了它。这看起来像是地图对象上控制位置的一个潜在错误。作为一种解决方法，您可以尝试在稍微超时的情况下从贴图控件中删除右键单击按钮，以完成淡出效果，然后在左键单击时将其读回贴图@普雷斯顿谢谢你。那正是我要找的东西。请随意发布您的工作作为答案。

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