Je suis à la suite d'un guide qui permet à Google Map Ecran de désactiver le défilement en fonction de la taille de l'écran. La seule partie que je lance est d'écrire un code qui modifie de manière dynamique la valeur vraie / falsifiée lorsque je redimensionne l'écran manuellement.
Ceci est le site Web que j'ai suivi les instructions, mais je ne peux pas sembler écrire le code de syntaxe correct pour produire la valeur False Véritable dynamique en fonction de la taille de l'écran https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout < / a> une partie du code que j'ai besoin d'utiliser: puis: Alors j'ai du mal à les combiner ensemble. J'ai essayé quelque chose comme ceci:
4 Réponses :
Vous pouvez utiliser cette fonction pour obtenir la largeur et la hauteur sur une redimension de l'écran.
@media only screen and (max-width: 560px) {
#maps {
display: none;
}
}
Non Non, je n'ai pas besoin de masquer des éléments, j'ai besoin de désactiver la fonctionnalité de défilement en fonction de la taille de l'écran.
Dans ce cas, utilisez simplement CSS. Requêtes médiatiques et débordement: caché devrait fonctionner
Vous pouvez ajouter un auditeur d'événement à l'événement Redimension et définir une valeur de votre variable chaque fois que la taille de la fenêtre est modifiée: puisque vous avez mentionné que vous souhaitez désactiver le défilement La taille de Windows étend une certaine valeur, il pourrait être plus facile de le faire. Si vous essayez de l'essayer, vous pouvez voir dans la console que la valeur change chaque fois que vous redimensionnez votre fenêtre): BTW, dans votre code, vous faites ceci: < Pré> xxx Vous pouvez simplifier cela à: ce qui est exactement le même.
Qu'entendez-vous par «de manière dynamique»?
Le simplify est bon, mais dans ce cas, je regarde toujours quand je redimensionnez l'écran moi-même sur le bureau pour pouvoir défiler sur le petit écran.
Lorsque je fais glisser l'écran de la fenêtre et redimensionnez-le
J'ai ajusté la réponse, veuillez essayer d'utiliser le code et vous pouvez voir dans la console qu'il fonctionne :)
Oui, cela fonctionne donc, j'ai juste besoin de travailler pour modifier ces valeurs en vrais et faux, puis appliquez-les à Google Map, merci.
Vous pouvez utiliser le MatchMedia Fonction à Exécutez un rappel chaque fois que le statut de requête multimédia change
var mql = window.matchMedia('(min-width: 700px)');
function mediaHandler(e) {
if (e.matches) {
/* the viewport is more than 700 pixels wide */
} else {
/* the viewport is 700 pixels wide or less */
}
}
mql.addListener(mediaHandler);
L'article que vous avez lié à manque d'informations importantes car il ne mentionne pas que Ce qui suit est un exemple non testé de la manière dont vous pourriez l'utiliser avec un $ code> est (probablement) JQuery . Mais vous n'avez pas besoin de jQuery du tout.
Ce que vous pouvez utiliser à la place est le MediaQuéryList Code> . Il est similaire aux requêtes de média dans CSS, mais c'est une API JavaScript. MediaQuéryList Code> Écouteur d'événements . Il définit la valeur initiale et écoute les modifications de votre requête multimédia avec un gestionnaire qui utilise SETOPTIONS de l'API Google Maps. P> var mql = window.matchMedia('(min-width: 560px)');
var isDraggable = mql.matches;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
draggable: isDraggable
});
}
function mqChange(e) {
map.setOptions({draggable: !!e.matches});
}
mql.addListener(mqChange);
HM Obtenir: Main.Js: 607 Couvent TypeError: Carte.setOptions n'est pas une fonction chez mediquerylist.mqchange
Avez-vous initialisé Google Maps selon leur Documentation ? Pouvez-vous vous connecter mapper avant map.setoptions est appelé?
Oui, ça marche maintenant, quelque chose ne va pas avec ce qui commence alors je vais le réparer. Mais oui cela a fonctionné merci
Trouvé le problème que je déclarais var map = ... intérieur Fonction initMap () , écrivant essentiellement var carte = nouveau google.maps.map (document.getElementyID ('carte')
Pourquoi "faire glisser" avoir une valeur booléenne et numérique (550)?
Mon impression est que si Val est vrai ou faux, il passera l'un d'entre eux à traîner? en fonction de la condition qui, dans ce cas, la taille de l'écran est plus 560, c'est vrai, sinon faux
Vous pouvez remplacer votre noyau de fonction avec: retour (glisser> 560);