revêtement
Table des matières
Aperçu des superpositions de carte
Tout le contenu superposé ou superposé sur la carte est collectivement appelé superpositions de carte. Tels que les annotations, les éléments graphiques vectoriels (y compris les polylignes, les polygones et les cercles), les fenêtres d'informations, etc. Les superpositions ont leurs propres coordonnées géographiques et lorsque vous faites glisser ou zoomez sur la carte, elles se déplacent en conséquence.
L'API map fournit les types de superpositions suivants :
Overlay : La classe de base abstraite des superpositions, et toutes les superpositions héritent des méthodes de cette classe.
Marqueur : le marqueur représente un point sur la carte et l'icône de la marque peut être personnalisée.
Étiquette : représente l'étiquette de texte sur la carte. Vous pouvez personnaliser le contenu du texte de l'étiquette.
Polyline : représente une polyligne sur la carte.
Polygone : Représente un polygone sur la carte. Un polygone est similaire à une polyligne fermée, mais vous pouvez également y ajouter une couleur de remplissage.
Cercle : Représente un cercle sur la carte.
InfoWindow : La fenêtre d'informations est également une superposition spéciale qui peut afficher du texte et des informations multimédias plus riches. Remarque : Une seule fenêtre d'information peut être ouverte sur la carte à la fois.
Vous pouvez utiliser la méthode map.addOverlay pour ajouter une superposition à la carte et la méthode map.removeOverlay pour supprimer la superposition. Notez que cette méthode ne s'applique pas à InfoWindow.
Label
L'étiquette représente un point sur la carte. L'API fournit des styles d'icônes par défaut et vous pouvez également spécifier des icônes personnalisées via la classe Icon. Les paramètres du constructeur de Marker sont Point et MarkerOptions (facultatif). Remarque : Lorsque vous utilisez une icône personnalisée, le point de coordonnées géographiques de l'étiquette sera situé au centre de l'icône utilisée pour l'étiquetage. Vous pouvez modifier la position d'étalonnage via la propriété de décalage de l'icône.
L'exemple ci-dessous ajoute une étiquette au point central de la carte et utilise le style d'étiquette par défaut.
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中Définir l'icône de marque
L'icône de la marque personnalisée peut être implémentée via la classe Icon L'exemple suivant est défini via l'attribut icon du paramètre MarkerOptions. Méthode setIcon().
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15); // 编写自定义函数，创建标注
function addMarker(point, index){ // 创建图标对象
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
offset: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}
// 随机向地图添加10个标注
var bounds = map.getBounds();
var lngSpan = bounds.maxX - bounds.minX;
var latSpan = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i ++) {
var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
addMarker(point, i);
}Écouter les événements d'étiquette
La méthode événementielle est la même que le mécanisme d'événement Map. Veuillez vous référer à la section événements.
marker.addEventListener("click", function(){
alert("您点击了标注"); });Annotation dragable
Les méthodes EnableDragging et DisableDragging du marqueur peuvent être utilisées pour activer et désactiver la fonction de glissement de l'annotation. Par défaut, les marqueurs ne prennent pas en charge le glisser. Vous devez appeler la méthode marqueur.enableDragging() pour activer la fonction de glisser. Une fois la fonction de déplacement activée pour une annotation, vous pouvez écouter l'événement dragend de l'annotation pour capturer la dernière position de l'annotation après le déplacement.
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})Memory Release
Dans la version 1.0 de l'API, si vous devez ajouter à plusieurs reprises un grand nombre d'étiquettes à la carte, cela peut occuper plus de ressources mémoire. Si votre annotation n'est plus utilisée après sa suppression, vous pouvez appeler la méthode Overlay.dispose() pour libérer de la mémoire. Notez que dans la version 1.0, les étiquettes ne seront plus ajoutées à la carte après avoir appelé cette méthode. A partir de la version 1.1, vous n'avez plus besoin d'utiliser cette méthode pour libérer des ressources mémoire, l'API vous aidera automatiquement à réaliser ce travail.
Par exemple, vous pouvez appeler cette méthode après la suppression de l'annotation :
map.removeOverlay(marker); marker.dispose(); // 1.1 版本不需要这样调用
Fenêtre d'informations
La fenêtre d'informations affiche le contenu HTML en position flottante au-dessus de la carte. La fenêtre d'information peut être ouverte directement à n'importe quel endroit de la carte, ou elle peut être ouverte sur l'objet étiquette (dans ce cas, les coordonnées de la fenêtre d'information sont cohérentes avec les coordonnées de l'étiquette). Vous pouvez utiliser InfoWindow pour créer une instance de fenêtre d'informations. Notez qu'une seule fenêtre d'informations peut être ouverte sur la carte en même temps.
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口Polyline
Polyline représente une superposition de polylignes sur la carte. Il se compose d'un ensemble de points et relie ces points pour former une polyligne.
Ajouter une polyligne
Les polylignes sont dessinées sur la carte sous la forme d'une série de segments droits. La couleur, l'épaisseur et la transparence de ces segments peuvent être personnalisées. La couleur peut être un nombre hexadécimal (par exemple : #ff0000) ou un mot-clé de couleur (par exemple : rouge).
Le dessin de polylignes nécessite que le navigateur prenne en charge la fonction de dessin vectoriel. Dans Internet Explorer, la carte utilise VML pour dessiner des polylignes ; dans d'autres navigateurs, utilisez SVG ou Canvas
L'extrait de code suivant crée une polyligne bleue de 6 pixels de large entre deux points :
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);Superposition personnalisée
L'API prend en charge les superpositions définies par l'utilisateur depuis la version 1.1.
Pour créer une superposition personnalisée, vous devez procéder comme suit :
1. Définir un constructeur de la superposition personnalisée et transmettre quelques variables libres via les paramètres du constructeur.
2. Définissez l'attribut prototype de l'objet de superposition personnalisé sur une instance de Overlay afin qu'il puisse hériter de la classe de base de superposition.
3. Implémentez la méthode initialize. Lorsque la méthode map.addOverlay est appelée, l'API appellera cette méthode.
4. Implémentez la méthode du tirage au sort.
Définissez le constructeur et héritez de Overlay
Vous devez d'abord définir le constructeur de la superposition personnalisée. Dans l'exemple suivant, nous définissons un constructeur appelé SquareOverlay, qui contient deux paramètres : le point central et la longueur du côté, utilisé pour créer un. superposition carrée sur la carte.
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, length, color){
this._center = center;
this._length = length;
this._color = color;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();Initialisation d'une superposition personnalisée
Lorsque la méthode map.addOverlay est appelée pour ajouter une superposition personnalisée, l'API appellera la méthode initialize de l'objet pour initialiser la superposition. Pendant le processus d'initialisation, le. la superposition doit être créée. Les éléments DOM requis par l'objet sont ajoutés au conteneur correspondant de la carte.
La carte fournit plusieurs conteneurs pour l'affichage en superposition. Ces éléments de conteneur peuvent être obtenus via la méthode map.getPanes. Ils incluent :
floatPane
markerMouseTarget
floatShadow
labelPane.
MarkerPane
mapPane
Ces objets représentent différents éléments du conteneur de couverture, et il existe une relation de superposition entre eux. Le calque supérieur est floatPane, qui est utilisé pour afficher le contenu de la fenêtre d'informations. Voici les clics sur la marque. le calque de zone et la fenêtre d'informations. Le calque d'ombre, le calque d'annotation de texte, le calque d'annotation et le calque de graphiques vectoriels.
Notre couverture carrée personnalisée peut être ajoutée à n'importe quel calque. Ici, nous choisissons de l'ajouter au MarkerPane comme l'un de ses nœuds enfants.
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;Superposition de dessin
Jusqu'à présent, nous avons seulement ajouté la superposition à la carte, mais nous ne l'avons pas placée au bon endroit. Vous devez définir la position de la superposition dans la méthode draw. Chaque fois que l'état de la carte change (par exemple, mouvement de position, changement de niveau), l'API appelle la méthode draw de la superposition pour recalculer la position de la superposition. Les coordonnées géographiques peuvent être converties en coordonnées de pixels requises de la superposition via la méthode map.pointToOverlayPixel.
// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}Supprimer les superpositions
Lorsque la méthode map.removeOverlay ou map.clearOverlays est appelée, l'API supprimera automatiquement l'élément DOM renvoyé par la méthode initialize.
Afficher et masquer les superpositions
Les superpositions personnalisées hériteront automatiquement des méthodes show et hide de Overlay, ce qui modifiera l'attribut style.display de l'élément DOM renvoyé par la méthode initialize. Si l'élément de superposition personnalisé est plus complexe, vous pouvez également implémenter vous-même les méthodes show et hide.
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = "";
}
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function(){
if (this._div){
this._div.style.display = "none";
}
}Personnaliser d'autres méthodes Grâce à l'attribut prototype du constructeur, vous pouvez ajouter n'importe quelle méthode personnalisée. Par exemple, la méthode suivante peut modifier l'état d'affichage de la superposition à chaque appel :
// 添加自定义方法
SquareOverlay.prototype.toggle = function(){
if (this._div){
if (this._div.style.display == ""){
this.hide();
}
else {
this.show();
}
}
}Ajouter une superposition
Vous êtes c'est maintenant fait. Une superposition personnalisée complète a été écrite et peut être ajoutée à la carte.
// 初始化地图
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加自定义覆盖物
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");
map.addOverlay(mySquare);
