Que dois-je faire si vue signale une erreur lors du déplacement de la souris vers et hors de la carte Baidu ?

J'ai récemment rencontré un problème dans un projet de développement utilisant Vue. Lors de l'utilisation de Baidu Maps, une erreur s'est produite lors du déplacement de la souris. Le processus de solution est assez tortueux. Je vais maintenant partager la solution complète.

Tout d’abord, examinons les manifestations spécifiques du problème.

Dans le composant Vue, le plug-in de carte Baidu (BaiduMapApi_Load) est utilisé et plusieurs superpositions (Overlay) sont dessinées sur la carte via JavaScript. Lorsque la souris passe dans la superposition, une erreur se produit dans l'événement de souris injecté. Le message d'erreur indique "Impossible de lire la propriété 'pixel' non définie".

Après avoir vérifié le code, nous avons constaté que le code d'erreur est :

var point = e.overlay.pixel,

C'est-à-dire que dans cette déclaration, e.overlay.pixel ne peut pas être reconnu.

Ensuite, j'ai vérifié les documents pertinents et le code source, et j'ai découvert que e.overlay.pixel n'était pas expliqué en détail dans le document officiel de Baidu Map et ne pouvait être spéculé qu'à partir de l'implémentation du code.

Après de nombreuses tentatives, j'ai découvert que ce n'est que si l'Overlay hérite de la classe BMap.Overlay que l'élément DOM de l'Overlay actuel peut être obtenu via e.overlay._div. Cependant, l'utilisation de e.overlay._div ne permet toujours pas d'obtenir les informations de position de la superposition actuelle, c'est-à-dire que la valeur e.overlay.pixel n'est pas définie.

Dans ce cas, nous devons résoudre le problème nous-mêmes. Après une enquête plus approfondie, nous avons finalement découvert que le problème réside dans l'événement d'interaction entre la carte et l'Overlay.

Le plug-in de carte Baidu (BaiduMapApi_Load) que nous utilisons est différent de la méthode de messagerie implémentée par l'API de carte officielle. Dans notre plug-in, les informations pertinentes de la superposition dans la carte sont générées via l'événement Vue Bus. Cependant, cela affectera la relation de pontage entre e.overlay et BMap, conduisant au problème précédent.

Pour résoudre ce problème, nous devons améliorer la messagerie. La méthode spécifique est la suivante :

1. Lorsque l'Overlay est chargé, appelez la méthode $emit du composant Vue pour envoyer les informations de l'Overlay sous la forme d'un événement
2. Écoutez l'événement dans le composant map et stockez l'événement ; Superposition dans un tableau dans l'instance Vue ;
3. Dans l'événement de déplacement de la souris, utilisez à nouveau Vue Bus pour envoyer l'ID de superposition ;
4. Dans l'instruction qui doit utiliser les informations de position de superposition, récupérez la superposition correspondante du tableau et obtenez via la méthode getProjection du prototype BMap.Overlay Longitude et latitude correspondantes
5. Enfin, utilisez la méthode pointToPixel de la classe BMap.Map pour convertir la longitude et la latitude obtenues en coordonnées sur la carte, puis stockez-les dans e. superposition.pixel.

À ce stade, le problème a été parfaitement résolu.

Pour résumer, la cause première de ce problème réside dans l’ordre de livraison des messages. Lors du développement avec Vue, nous devons accorder une attention particulière à la distribution et à l'ordre d'écoute des événements pour éviter de tels problèmes. De plus, lors de l'utilisation du plug-in de carte Baidu, il est recommandé d'utiliser la méthode de messagerie API officielle, sinon des problèmes similaires sont susceptibles de se produire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!