the Google Maps API pour un polygone fait ne pas offrir une méthode de drag.
Quel serait un moyen efficace de mettre en œuvre une telle caractéristique (c'est-à-dire suffisamment optimisée de manière à ne pas tuer un ordinateur portable de quatre ans)?
Merci!
5 Réponses :
Vous pouvez avoir des marqueurs pour chaque point sur le polygone, ces marqueurs pourraient avoir glisser et à la fin de chaque traînée, le polygone pourrait être redessiné.
Vous pouvez également avoir un marqueur au centre du polygone représentant le polygone dans son ensemble, lorsque vous déplacez ce marqueur, chaque marqueur pourrait être déplacé de la même quantité pour maintenir la forme.
Pouvez-vous ajouter clic / dragez les auditeurs, etc. sur le GMAP lui-même et effectuez le calcul si le clic était à l'intérieur du polyon ou non?
J'ai trouvé la mise en œuvre de Google Maps V2 Polygon pour être très limitative pour les besoins que j'ai eu et résolvés en créant une superposition personnalisée. Mon groupe est actuellement coincé sur IE6, donc je n'ai pas encore migré vers Google Maps V3 - mais examine rapidement les émissions de l'API que vous pourriez probablement faire une chose similaire que j'ai faite en v2 avec v3.
essentiellement l'idée est la suivante:
superposition personnalisée:
Voici quelques informations pour vous aider à créer votre propre superposition personnalisée:
Création de votre propre objet polygone "glisser":
Une fois que vous obtenez cela, vous voudrez ajouter vos propres polygones à la superposition personnalisée au lieu d'utiliser GPolygons. J'ai traversé le processus douloureux d'apprendre SVG / VML et j'écris une bibliothèque pour combler SVG / VML ensemble - vous pourriez le faire, mais je vous recommanderais de commencer par essayer d'utiliser une autre bibliothèque telle que Raphaël.
Utiliser Raphaël vous fera économiser beaucoup de temps à essayer de comprendre comment obtenir des fonctionnalités de graphisme vectoriel (polygone) croiseur - et le meilleur de tout cela prend en charge les événements de drags déjà, voici un exemple de leur bibliothèque:
http://raphaeljs.com/graffle.html
Une fois que vous avez une superposition personnalisée et que vous êtes capable de lancer des objets Raphaël, la dernière étape consiste à traduire les coordonnées souhaitées à partir d'une valeur de Lat / LNG à une valeur de pixel. Ceci est disponible dans le MapCanvasProjection de V3:
Vous pouvez utiliser FromLatlngtoDivPixel pour déterminer les valeurs de pixels réelles pour les points de votre polygone Raphael, le dessine, puis l'ajoutez à la superposition avec un événement de glisser.
Comme une réflexion après coup - j'ai constaté que mes objets de polygone fonctionnaient beaucoup plus vite que les objets GPolygon dans V2 - Je ne sais pas comment ils se produisent dans V3, mais j'ai trouvé que créer vos propres polygones directement avec SVG / VML entraîne un objet beaucoup plus léger que vous avez avoir plus de contrôle directement. Je ne sais pas si Google utilise maintenant SVG / VML ou SANVAS pour dessiner leurs polygones - il a changé quelques fois de temps dans toutes les versions.
D'accord - Donc, après avoir vu le site Web que vous essayez de mettre en œuvre, j'ai commencé à vous sentir comme Raphaël peut ne pas être nécessaire car il s'agit d'une jolie bibliothèque JS lourde - et si vous n'essayez que de dessiner un polygone rectangle, je pensais, pourquoi pas Faites-le simplement avec une seule Div légère à la place?
Cependant, je pense que la solution Raphaël tiendrait toujours de l'eau pour de nombreux autres cas - je pense donc que je vais simplement poster une autre réponse possible.
Voici un exemple de travail que j'ai jeté ensemble:
http://www.johnmick.net/drag-div-v3/
N'hésitez pas à jeter un oeil à la source:
http://www.johnmick.net/drag-diviv -v3 / js / main.js
essentiellement nous faisons ce qui suit
Actuellement, je ne stocke actuellement qu'une valeur de Letlng pour le rectangle (étant le coin supérieur gauche) - Vous pouvez facilement étendre cet exemple pour stocker les 4 points du rectangle et que la forme se redimensive de manière dynamique sur des zooms. Vous voudrez peut-être faire cela, sinon lorsque les utilisateurs effectuent un zoom arrière, ils obtiendront un rapport climatique pour une zone plus grande et plus grande.
@Dave: Ah maintenant, cela ressemble à une chose intéressante à résoudre - pour faire des formes de polygone complexes, vous pouvez être le meilleur de l'apprentissage SVG / VML - ce n'est vraiment pas si mauvais, sinon un peu fastidieux - de cette façon de garder la trace de nombreux Points et dessinez la forme de toutes les formes que vous souhaitez. Oh et tu es très bienvenu! Faire mes propres objets GPolygon améliorés était un énorme dilemme pour moi il y a quelques années, alors je suis vraiment heureux de transmettre tout ce que j'ai appris à aider quelqu'un d'autre.
Dès aujourd'hui 12/4/2015, j'ai essayé à la fois sur IE et Chrome, le polygone n'est pas draguable.
Voici comment je le fais. Trouvez le centre approximatif du polygone et ajoutez un marqueur, puis ajoutez un écouteur de glisser sur le marqueur. Sur les modifications de Lat / GNL, soustrayez la différence du marqueur d'origine Lat / GNG, soustrayez la différence à chacun des chemins, puis définissez la position d'origine vers la nouvelle position. Assurez-vous que dans votre appel d'API JavaScript que vous avez une bibliothèque = géométrie, dessin Si vous avez des questions, n'hésitez pas à me contacter.
Depuis la version 3.11 (daté du 22 janvier 2013) Il est possible de définir la propriété Si vous voulez déplacer programmable un polygone, vous aurez besoin une extension personnalisée Google Maps que j'ai écrite , car l'API ne fournit pas une telle méthode. Draggable sur l'instance google.maps.polygon . Voir Cet exemple .