Как отключить прокрутку в мобильном макете Карт Google?

Question

Я разрабатываю мобильные сайты с Google Maps, встроенными через Google Maps API. Мне удалось остановить определенные типы поведения, но я не смог найти хороший способ остановить прокрутку карты, когда я прокручивал страницу вниз на iPhone. Вот код, который я использую:

<script>
function initialize() {
  var mapElem = document.getElementById("map"),
      myOptions = {
        zoom: 13,
        center: new google.maps.LatLng(41.8965,-84.063),
        navigationControl: true,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL,
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        streetViewControl: false,
        mapTypeControl: false,
        disableDoubleClickZoom: true,
        scrollwheel: false,
        backgroundColor: '#f2efe9',
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(mapElem, myOptions);
}
</script>
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script>

Заранее спасибо.

Answer 1

Проверить, доступен ли ontouchend в document.

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);

Answer 2

draggable: false

Как указано в API

Answer 3

В вашем css:

    pointer-events: none;

Answer 4

Вы также можете попробовать a) обнаружение мобильного устройства на стороне сервера, которое упомянуло здесь , а затем b) включить его в файл .php (например, header.php или footer.php), например:

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

Вставьте его в свой код:

var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(12.345, 12.345),
        scrollwheel: false,
        <?php echo(isMobile()) ? 'draggable: false' : ''; ?>
    };

Обратите внимание, что это, конечно, работает, только если у вас есть код Google Maps Javascript, встроенный в ваш файл php.

Answer 5

Добавьте это в список myOptions:

gestureHandling: 'cooperative'

Это из документации по Google Maps JS API. Я реализовал аналогичную функциональность в своем веб-приложении для мобильных карт.

Answer 6

я новичок, поэтому я даю нубу ответ:

попробуйте установить ширину на 90%, чтобы оставалось место для пальца, который будет опускаться вверх и вверх, не касаясь карты.

Для меня это сработало:)

Answer 7

Вот как я решил эту проблему с помощью методов реагирования на медиазапросы.

HTML в нижнем колонтитуле страницы (чуть выше </body>):

<div class="jrespond"></div>

CSS:

.jrespond{
  width: 30px;
}

@media only screen and (max-width: 991px){
  .jrespond{
    width: 20px;
  }
}

@media only screen and (max-width: 767px){
  .jrespond{
    width: 10px;
  }
}

JavaScript:

if(jrespond == 10){
  // Do mobile function
}

if(jrespond == 20){    
  // Do tablet function
}

if(jrespond >= 30){
  // Do desktop function
}

**/// Google** map snippet
var isDraggable = true;
if(jrespond == 10){
  var isDraggable = false;
}

var myOptions = {    
  zoom: 12,
  center: myLatlng1,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  draggable: isDraggable
}

Answer 8

У меня была такая же проблема, и я нашел ответ в другом вопросе StackOverflow.Это решение помогло мне с моей картой на моем Android по крайней мере с использованием Chrome.

Встраивание карт Google на страницу без изменения режима прокрутки iPhone