outil

Aperçu des outils cartographiques

Conseils : L'outil a été transformé en une bibliothèque open source (lib) et est gratuit et ouvert au monde extérieur. Vous pouvez accéder directement à la bibliothèque open source JavaScript. Si vous devez exécuter l'exemple de code suivant, veuillez d'abord confirmer que le fichier lib a été introduit dans le projet de développement. Pour des méthodes de référence spécifiques, consultez l'exemple de fichier source fourni par la bibliothèque open source JavaScript. Notez que la bibliothèque open source doit être utilisée avec l'API Baidu Map JS.

Baidu Map fournit des « outils » avec des fonctions interactives plus complexes, notamment :

MarkerTool : outil de marquage. Avec cet outil, les utilisateurs peuvent ajouter des étiquettes à n'importe quelle zone de la carte.

MarkerClusterer : Agrégateur multi-annotations. Cet outil résout le problème du chargement d'un grand nombre d'entités ponctuelles sur la carte, provoquant une lenteur et un écrasement.

MarkerManager : Outil de gestion du marquage. Cet outil offre la possibilité d'afficher, de masquer et d'effacer toutes les annotations.

RichMarker : outil d'annotation riche. Cet outil fournit aux utilisateurs des styles de marqueurs personnalisés et ajoute des événements de clic, double-clic, glisser-déposer.

DistanceTool : outil de mesure de distance. Cet outil permet aux utilisateurs de mesurer la distance entre n'importe quel emplacement sur la carte.

RectangleZoom : outil de zoom de région. Cet outil zoomera ou dézoomera sur la carte en fonction de la taille de la zone rectangulaire dessinée par l'utilisateur.

MapWrapper : outil de déplacement de carte. Cet outil fournit la fonctionnalité permettant d'ajouter des marqueurs sous forme de coordonnées Google ou GPS à Baidu Maps.

InfoBox : outil de fenêtre d'informations personnalisé. Semblable à infoWindow, il est plus flexible qu'infoWindow. Par exemple, vous pouvez personnaliser la bordure, le style du bouton de fermeture, etc.

LuShu : Road book, outil de déplacement de trajectoire. Cet outil est utilisé pour réaliser le mouvement des marqueurs le long de l'itinéraire et possède des fonctions telles que la pause.

CityList : outil de liste de villes. Cet outil génère directement une liste de villes pour les utilisateurs et s'accompagne d'opérations de sélection de villes.

AreaRestriction : outil de restriction de zone. Cet outil fournit aux utilisateurs les paramètres de restriction de la zone de navigation sur la carte Baidu.

GeoUtils : outils d'opérations géométriques. Cet outil fournit un jugement sur la relation entre les points et les rectangles, les cercles, les lignes de polygone et les faces de polygone, et fournit des formules pour calculer la longueur des polylignes et l'aire des polygones.

TrafficControl : contrôles de la circulation en temps réel. Cet outil permet d'afficher, de masquer, etc. en temps réel la couche de flux de trafic sur la carte.

SearchControl : contrôle de recherche. Cet outil est destiné aux appareils mobiles et permet de sélectionner une liste de villes, un champ de recherche locale et un champ de requête de conduite de bus. et fournir les fonctions correspondantes.

DrawingManager : outil de dessin avec la souris. Grâce à cet outil, les utilisateurs peuvent dessiner des points, des lignes et des images n'importe où sur la carte et afficher la distance de la ligne et la superficie de la surface.

EventWrapper : outil de packaging d'événements. Cet outil offre une approche plus conviviale de l’utilisation des événements.

TextIconOverlay : outil de superposition personnalisé. Les utilisateurs peuvent utiliser cet outil pour ajouter des superpositions de texte et de styles d'icônes à la carte.

SearchInRectangle : outil de zoom de cadre, utilisé pour obtenir trois effets de recherche de cadre.

SearchInfoWindow : outil de fenêtre d'informations "Style de carte Baidu". Cet outil fournit aux utilisateurs une fenêtre d'informations avec un champ de recherche, et le contenu de cette fenêtre peut être librement personnalisé dans une variété de styles. Dans le même temps, les utilisateurs peuvent envoyer le titre de la fenêtre d'information sur leur téléphone mobile sous forme de message texte.

La classe d'outils doit fournir des paramètres d'instance de carte lors de l'initialisation afin que l'outil puisse prendre effet sur la carte. Vous pouvez ajouter plusieurs outils à la carte, mais un seul peut être actif à la fois. L'outil d'étiquetage et l'outil de télémétrie quitteront automatiquement l'état ouvert après avoir terminé une opération, tandis que l'outil de zoom de zone peut être configuré pour se fermer automatiquement ou non.

Ajout d'outils à la carte

Une fois la carte correctement initialisée, vous pouvez créer des instances d'outils. L'exemple suivant montre comment ajouter un outil d'étiquette à la carte.

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myPushpin = new BMap.PushpinTool(map);         // 创建标注工具实例    
myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息   
 alert("您标注的位置：" +     
       e.marker.getPoint().lng + ", " +     
       e.marker.getPoint().lat);    
});    
myPushpin.open();                                  // 开启标注工具

Contrôlez l'ouverture et la fermeture des outils via des boutons

La classe d'outils ne fournit pas d'éléments d'interface utilisateur pour contrôler son ouverture et sa fermeture. Vous pouvez créer vous-même ces éléments selon vos besoins et les placer à l'intérieur ou à l'extérieur de la zone cartographique. L'appel d'open et de close de la classe d'outils peut contrôler l'ouverture et la fermeture de l'outil.

Initialisez d'abord la carte et créons une instance d'outil de télémétrie :

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDis = new BMapLib.DistanceTool(map);

Ensuite, nous créons deux éléments de bouton et leur ajoutons des événements de clic.

Outil d'agrandissement du cadre

Certaines classes d'outils fournissent des paramètres de configuration modifiables. Vous pouvez vous référer à la documentation de l'API pour les modifier afin de répondre à vos besoins.

Cet exemple ajoute un texte d'invite à l'outil de zoom de zone.

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDrag = new BMapLib.DragAndZoomTool(map, {    
 followText : "拖拽鼠标进行操作"    
});