Google Maps API v3 Custom Button перемещается - PullRequest
Новая
       1

Google Maps API v3 Custom Button перемещается

0 голосов
/ 08 мая 2018

JSFiddle , воспроизводящий проблему.

Я добавляю пользовательскую кнопку в верхний центр карты.У меня есть событие клика, прикрепленное к карте, которое исчезнет в кнопкеСобытие щелчка правой кнопкой мыши на карте, которое приведет к исчезновению кнопки.

Чтобы воспроизвести проблему:

  1. Щелкните правой кнопкой мыши карту, чтобы исчезнуть с кнопки.
  2. Увеличить /Уменьшите уровень масштабирования как минимум на один уровень.
  3. Щелкните левой кнопкой мыши, чтобы ослабить кнопку.

В этот момент кнопка вернется в положение, отличное от исходного положения.

Увеличение / уменьшение уровня масштабирования как минимум на один уровень.

После этого вы увидите, что кнопка вернулась в исходное положение. 

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>

1 Ответ

0 голосов
/ 10 мая 2018

Это похоже на потенциальную ошибку с контрольными позициями на объекте Map. Вы можете сообщить об ошибке в Общедоступном трекере Google.

В качестве обходного пути, вы можете попробовать удалить кнопку на rightclick из Map элементов управления (с небольшим тайм-аутом для завершения эффекта затухания), а затем прочитать ее обратно на карту слева click .

Простой образец 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...