Question

JSFiddle重现这个问题。

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

要重现此问题：

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

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

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

然后，您将看到按钮快速回到原始位置。

＆＃13;

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();
  });

＆＃13;

.button {
  display: block;
}

#map {
  width: 300px;
  height: 300px
}

＆＃13;

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

＆＃13;

Answer 1

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

作为一种解决方法，您可以尝试从rightclick控件中删除Map上的按钮（稍微超时以使淡出效果完成），然后将其重新读回到地图上离开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>

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

1 个答案: