Contrôle

Présentation des contrôles de la carte

Les éléments de l'interface utilisateur sur Baidu Maps qui sont responsables de l'interaction avec la carte sont appelés contrôles. L'API Baidu Map fournit une multitude de contrôles et vous pouvez également implémenter des contrôles personnalisés via la classe Control.

Les contrôles fournis dans l'API map sont :

Contrôle : la classe de base abstraite du contrôle. Tous les contrôles héritent des méthodes et propriétés de cette classe. Cette classe vous permet d'implémenter des contrôles personnalisés.

NavigationControl : Carte Contrôle du panoramique et du zoom, qui est situé par défaut dans le coin supérieur gauche de la carte sur PC. Il inclut la fonction de contrôle du panoramique et du zoom de la carte. La version mobile propose un contrôle de zoom, situé par défaut en bas à droite de la carte.

OverviewMapControl : Contrôle de la carte miniature, situé en bas à droite de la carte par défaut, est une carte miniature pliable.

ScaleControl : Contrôle d'échelle, situé en bas à gauche de la carte par défaut, affiche la relation d'échelle de la carte.

MapTypeControl : Contrôle de type de carte, situé par défaut dans le coin supérieur droit de la carte.

CopyrightControl : Contrôle Copyright, situé en bas à gauche de la carte par défaut.

GeolocationControl : Contrôle de positionnement, développé pour les terminaux mobiles, situé par défaut en bas à gauche de la carte.

Ajouter des contrôles à la carte

Vous pouvez utiliser la méthode Map.addControl() pour ajouter des contrôles à la carte. La carte doit être initialisée avant cela. Par exemple, pour ajouter un contrôle de carte standard à votre carte, ajoutez ce qui suit à votre code :

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addControl(new BMap.NavigationControl());

Vous pouvez ajouter plusieurs contrôles à votre carte. Dans cet exemple, nous ajoutons un contrôle de panoramique et de zoom, un contrôle d'échelle et un contrôle de vignette à la carte. Une fois les contrôles ajoutés à la carte, ils prennent effet immédiatement.

map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

Contrôlez la position du contrôle

Lors de l'initialisation du contrôle, vous pouvez fournir un paramètre facultatif, dans lequel les propriétés d'ancrage et de décalage contrôlent conjointement la position du contrôle sur la carte.

Contrôler la position d'amarrage Anchor représente la position d'ancrage du contrôle, c'est-à-dire le coin de la carte auquel le contrôle est ancré. Lorsque la taille de la carte change, le contrôle ajustera sa position en fonction de l'emplacement d'ancrage. Les valeurs autorisées pour l'ancrage sont :

BMAP_ANCHOR_TOP_LEFT signifie que le contrôle est positionné dans le coin supérieur gauche de la carte.

BMAP_ANCHOR_TOP_RIGHT signifie que le contrôle est positionné dans le coin supérieur droit de la carte.

BMAP_ANCHOR_BOTTOM_LEFT signifie que le contrôle est positionné dans le coin inférieur gauche de la carte.

BMAP_ANCHOR_BOTTOM_RIGHT signifie que le contrôle est positionné dans le coin inférieur droit de la carte.

Décalage de la position du contrôle

En plus de spécifier la position d'ancrage, le décalage peut également être utilisé pour indiquer à combien de pixels le contrôle se trouve par rapport à la limite de la carte. Si les positions d'ancrage de deux contrôles sont identiques, les contrôles peuvent se chevaucher. Dans ce cas, la valeur de décalage peut être utilisée pour afficher les deux contrôles séparément.

Cet exemple place la barre d'échelle dans le coin inférieur gauche de la carte. Étant donné que l'API aura des informations de copyright par défaut, certaines valeurs de décalage doivent être ajoutées pour éviter que les contrôles ne se chevauchent.

var opts = {offset: new BMap.Size(150, 5)}    
map.addControl(new BMap.ScaleControl(opts));

Modifier la configuration du contrôle

Le contrôle API de la carte fournit une multitude de paramètres de configuration. Vous pouvez vous référer à la documentation de l'API pour les modifier afin d'obtenir une apparence de contrôle qui répond à vos exigences. Par exemple, le contrôle NavigationControl fournit les types suivants :

BMAP_NAVIGATION_CONTROL_LARGE signifie afficher le contrôle complet de panoramique et de zoom.

BMAP_NAVIGATION_CONTROL_SMALL signifie afficher un petit contrôle de panoramique et de zoom.

BMAP_NAVIGATION_CONTROL_PAN signifie que seule la fonction panoramique du contrôle est affichée.

BMAP_NAVIGATION_CONTROL_ZOOM signifie que seule la partie zoom du contrôle est affichée.

L'image ci-dessous montre l'apparence des différents types de commandes ci-dessus de gauche à droite :

Les 4 premiers de l'image ci-dessus sont les styles de contrôle de panoramique et de zoom côté PC, et le dernier est le style de contrôle du zoom côté mobile.

L'exemple ci-dessous ajustera l'apparence du contrôle de carte panoramique et zoom.

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
map.addControl(new BMap.NavigationControl(opts));

Contrôles personnalisés

L'API Baidu Map vous permet de créer des contrôles de carte personnalisés en héritant de Control.

Pour créer un contrôle personnalisé utilisable, vous devez procéder comme suit :

1. Définir un constructeur pour le contrôle personnalisé. 2. Définissez l'attribut prototype du constructeur de contrôle personnalisé sur une instance de Control afin qu'il puisse hériter de la classe de base du contrôle. 3. Implémentez la méthode initialize() et fournissez les propriétés defaultAnchor et defaultOffset.

Définissez le constructeur et héritez du contrôle

Vous devez d'abord définir le constructeur du contrôle personnalisé et fournir deux propriétés, defaultAnchor et defaultOffset, dans le constructeur afin que l'API puisse positionner correctement le contrôle, puis le laisser hériter du contrôle. Dans l'exemple suivant, nous définissons un contrôle nommé ZoomControl, qui zoomera sur la carte de deux niveaux à chaque fois que vous cliquerez dessus. Il comporte un logo textuel au lieu de l'icône graphique utilisée dans les commandes de panoramique et de zoom.

// 定义一个控件类，即function    
function ZoomControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
ZoomControl.prototype = new BMap.Control();

Initialisation d'un contrôle personnalisé

Lorsque la méthode map.addControl() est appelée pour ajouter un contrôle personnalisé, l'API appellera la méthode initialize() de l'objet pour initialiser le contrôle dont vous avez besoin. pour implémenter cette méthode et créer les éléments DOM requis pour le contrôle et ajouter des événements DOM. Tous les éléments DOM des contrôles personnalisés doivent éventuellement être ajoutés au conteneur de carte (c'est-à-dire l'élément DOM où se trouve la carte). Le conteneur de carte peut être obtenu via la méthode map.getContainer(). Enfin, la méthode initialize() doit renvoyer l'élément DOM du conteneur de contrôle.

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
ZoomControl.prototype.initialize = function(map){    
// 创建一个DOM元素   
 var div = document.createElement("div");    
// 添加文字说明    
 div.appendChild(document.createTextNode("放大2级"));    
 // 设置样式    
 div.style.cursor = "pointer";    
 div.style.border = "1px solid gray";    
 div.style.backgroundColor = "white";    
 // 绑定事件，点击一次放大两级    
 div.onclick = function(e){  
  map.zoomTo(map.getZoom() + 2);    
 }    
 // 添加DOM元素到地图中   
 map.getContainer().appendChild(div);    
 // 将DOM元素返回  
 return div;    
 }

Ajouter un contrôle personnalisé

La méthode d'ajout d'un contrôle personnalisé est la même que l'ajout d'autres contrôles, appelez simplement la méthode map.addControl().

// 创建控件实例    var myZoomCtrl = new ZoomControl();

// Ajouter à la carte map.addControl(myZoomCtrl);