web-dev-qa-db-fra.com

Comment désactiver le défilement sur la présentation mobile de Google Maps?

Je développe des sites mobiles avec Google Maps intégré via l'API Google Maps. J'ai pu arrêter certains types de comportement, mais je n'ai pas trouvé de moyen d'arrêter le défilement de la carte lorsque je fais défiler la page avec le doigt vers le bas sur l'iPhone. Voici le code que j'utilise:

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

Merci d'avance.

javascriptgoogle-mapsmobile
32
Brad Birdsall

Validez si ontouchend est disponible dans document. 

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

Comme indiqué dans l'API

39
Mantar

Dans votre css:

    pointer-events: none;
9
Pablo Cegarra

Vous pouvez également essayer A. Une détection mobile côté serveur que vous avez mentionnée ici puis b) incluez-la dans votre fichier .php (par exemple, header.php ou footer.php), comme suit:

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"]);
}

Intégrez-le dans votre code:

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

Notez que cela ne fonctionne bien entendu que si le code Javascript de Google Maps est intégré à votre fichier php.

7
Mike

Ajoutez ceci à votre liste myOptions:

gestureHandling: 'cooperative'

Cela provient de la documentation de Google Maps JS API. J'ai mis en œuvre une fonctionnalité similaire sur mon application Web de cartes mobiles.

2
brainsexyapril

je suis un noob, alors je donne une réponse noob:

essayez de mettre la largeur à 90%, de manière à laisser de la place pour le doigt sans toucher la carte.

Pour moi ça a marché :)

1
Victor Catalin Torac

J'ai eu le même problème et j'ai trouvé la réponse dans une autre question StackOverflow. Cette solution fonctionnait pour moi avec ma carte sur Android en utilisant au moins Chrome.

Intégrez Google Maps à la page sans modifier le comportement de défilement de l'iPhone

0
tommycode

Voici comment je l'ai résolu avec des techniques réactives d'interrogation des médias.

HTML au bas de la page (juste au-dessus de </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
}
0
Steve Porter