J'ai commencé à implémenter mon logiciel à l'aide de cartes API V3. Malheureusement, j'ai découvert que V3 API a des problèmes graves qui me tient de retour de la licence de billets.
Mes clients utilisent des moniteurs avec une résolution HD 1920x1080 et la carte prend 90% de l'espace d'écran. Malheureusement, voici le problème dont je parle. Lorsque je clique avec la souris sur la carte et commencez à le faire glisser, il est Pas à couple et c'est vraiment ennuyeux. Tout le plaisir disparaît.
J'ai essayé des différentes scénariseuses en utilisant Windows XP, Windows 7 et Windows 8. Les navigateurs que je travaille sont les faits intéressants:
Je pense que je décrivais le problème aussi profond possible que possible et peu importe à quel point j'ai essayé de le contourner, je ne pouvais trouver aucune solution.
Je serai heureux que quelqu'un partage son opinion sur ce problème.
P.s. Malheureusement, je n'ai pas de clé pour V2, je ne peux donc pas créer un exemple où vous pouvez voir la carte en dehors de mon localhost, mais j'ai trouvé un site Web où il y a une comparaison côte à côte (V2 et V3). Essayez de faire glisser les cartes pour voir la différence même.
http://www.wolfpil.de/v2-v3-sidebyside.html < / a>
La résolution des cartes est très petite et les utilisateurs très probablement inexpérimentés peuvent ne pas voir la différence afin de vous donner également des liens séparés vers les cartes et il vous suffit d'utiliser Firebug ou un débuger similaire pour rendre la résolution de la toile plus grande . Ensuite, vous verrez de quoi je parle.
4 Réponses :
même ici. Ce que j'ai remarqué, c'est que V3 incendie beaucoup d'événements tout en panoramique sur la carte et le navigateur a tendance à s'étouffer (FF surtout). Je dis cela parce que j'ai également utilisé l'API de Bing Maps et le nombre d'événements par seconde pour de ce que je peux dire, Google Maps semble tirer un Pour ce faire, nous ajoutons un auditeur d'événement au Vous pouvez augmenter la période Maintenant, après tout cela, Google Maps ne sera pas aussi lisse que les cartes Bing. C'est parce que les cartes Bing utilisent l'inertie: lorsque vous déplacez la carte violemment, la carte commencera lentement à suivre la souris puis plus rapide et plus rapide. Cela crée en effet une casserole très lisse. P> Un fait intéressant que j'ai trouvé est que Google Chrome et Opera / Chrommium généreront environ un événement http: //jsfiddle.net/unm57/ (cochez la console JS dans Firefox; Vous devriez voir certains événements arrêtés, puis un événement autorisé) p> ViewChange code> (équivalent pour Centre_changed code> dans Google) est beaucoup plus petit. Aussi, ils fournissent la méthode addTthotTledHandler () code> avec laquelle vous pouvez réduire le nombre d'événements générés. Centre_Changed code> événement Pour chaque événement Mousemove code> et avant la mise à jour de la carte de la carte. Vous obtenez donc beaucoup d'événements générés, mais aucun d'entre eux n'est reproduit à l'écran; Les étrangers de navigateur sur la carte Affichez des mises à jour ou il se peut que la carte attend jusqu'à ce qu'il n'y ait plus de changements et il ne s'agit que de la vue. P> Mousemove CODE> Événements Pour atteindre Google Maps, alors le navigateur ne s'éteindra pas sur Mousemove CODE> Events Plus tous les autres événements que Google Maps génère de cet événement, tels que Center_Changed CODE> et le La carte piquera doucement. strong> p> #map code> div (nous pouvons l'ajouter au corps code> tag aussi). Nous ajoutons l'événement pour la phase de capture. Lorsque la souris se déplace à l'écran, la balise code> code> reçoit l'événement que notre #map code> div puis dit Google Maps éléments (divs, tuiles). Ceci est la phase de capture. Après cela suit la phase de bulle dans laquelle l'événement remonte des éléments de Google Maps à notre #map code> div puis à la balise code> code>. Habituellement, les manipulateurs d'événements sont enregistrés pour la phase de bulle que nous enregistrons un gestionnaire pour la phase de capture, nous pouvons annuler l'événement et il n'y aura donc pas de phase de bouillonnement pour cet événement. Cela signifie également que Google Maps ne recevra pas l'événement. P> et et espace code> paramètres pour tuer plus d'événements. Tuer trop d'événements signifie que la carte commencera à sauter d'une position à l'autre. Tuer trop peu signifie que tous les événements atteindront Google Maps et que le navigateur s'étendra sur des événements nouvellement générés de Google Maps et que la carte va donc sauter d'une position à l'autre. Certains milieux fonctionnent mieux. P> Mousemove code> par seconde, même si la souris ne bouge pas! Ce code va aussi tuer ces événements (car distance code> est zéro pour ces événements). P> <html>
<head>
<style type='text/css'>
#map {
position: absolute;
width: 100%;
height: 100%;
margin: 20px;
}
</style>
<script type='text/javascript'>
var last = {time : new Date(), // last time we let an event pass.
x : -100, // last x position af the event that passed.
y : -100}; // last y position af the event that passed.
var period = 100; // ms - don't let pass more than one event every 100ms.
var space = 2; // px - let event pass if distance between the last and
// current position is greater than 2 px.
function init_map() {
map_div = document.getElementById("map")
// map
var map_options = {
center: new google.maps.LatLng(45.836454, 23.372497),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), map_options);
// register event handler that will throttle the events.
// "true" means we capture the event and so we get the event
// before Google Maps gets it. So if we cancel the event,
// Google Maps will never receive it.
map_div.addEventListener("mousemove", throttle_events, true);
};
function throttle_events(event) {
var now = new Date();
var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
var time = now.getTime() - last.time.getTime();
if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both
console.log("event stopped");
if (event.stopPropagation) { // W3C/addEventListener()
event.stopPropagation();
} else { // Older IE.
event.cancelBubble = true;
};
} else {
console.log("event allowed: " + now.getTime());
last.time = now;
last.x = event.clientX;
last.y = event.clientY;
};
};
</script>
</head>
<body onload = "init_map()">
<div id="map"></div>
</body>
</html>
Essayons donc de trouver une solution :)
Lorsque je retire les pilotes de la carte vidéo ou la connexion via le bureau à distance, le problème n'est pas là :)
J'ai une idée. Je reviendrai :).
Je vais avoir les doigts croisés pour vous :) attendra votre réponse
juste vérifier la réponse.
Je faisais face à ce problème dans seulement des navigateurs mobiles. Le glisser-glisser était lisse dans les navigateurs de bureau, mais lorsqu'il est arrivé au mobile, il a été décalé lorsque l'utilisateur a glissé la carte. J'ai passé comme 3 heures à ce sujet et j'ai finalement réalisé qu'une étiquette de méta manquante était la raison.
Fondamentalement si vous n'incluez pas cette balise méta
Le problème vient. Je me sens incroyablement stupide de réaliser cela après 3 heures ou de ne pas ajouter la balise méta en premier lieu. Mais de toute façon si quelqu'un d'autre fait aussi cette erreur, j'espère avoir sauvé une partie de votre temps.
Nous avions eu un problème que nous avions une transition CSS3 ajoutée à tous les éléments ..
Alors, supprimez la transition et son bien fonctionné. P>
Voir exemple: p>
P> P>
#map * {
-moz-transition: none;
-webkit-transition: none;
-o-transition: all 0s ease;
transition: none;
} J'ai fait face au même problème et j'ai perdu mes jours à résoudre, enfin, j'ai compris comment cela peut être résolu simplement.
La réponse de @Arturs Smirnovs était très utile.
Dans mon cas, il y avait une transition dans CSS, par cette carte de Google ne fonctionnant pas en douceur, j'ai ajouté le CSS pour désactiver la transition sur la carte, de sorte que la carte fonctionnait très bien.
J'espère que cela peut aider n'importe qui.