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

Я разрабатываю мобильные сайты с Google Maps, встроенными через API Карт Google. Я смог остановить определенные типы поведения, но не смог найти хороший способ остановить прокрутку карты, когда я прокручиваю палец вниз по странице на 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>

Спасибо заранее.

Ответы

Ответ 1

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

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

Ответ 3

В вашем css:

    pointer-events: none;

Ответ 4

Вы также можете попробовать а) мобильное обнаружение на стороне сервера понравилось упомянутым здесь, а затем 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' : ''; ?>
    };

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

Ответ 5

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

gestureHandling: 'cooperative'

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

Ответ 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
}

Ответ 8

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

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

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