So nutzen Sie die Fähigkeiten von Baidu Map api_javascript

Wenn Sie die Baidu Map API verwenden möchten, müssen Sie zunächst einen Baidu Map API-Schlüssel erhalten und dann die Baidu Map API einführen. Als Nächstes werden wir die Techniken zum Erhalten und Einführen des API-Schlüssels im Detail vorstellen Stellen Sie Ihnen den Code zur Verfügung. Eine ausführliche Erklärung zur Verwendung der Baidu Maps API finden Sie unten.

Wenn Sie die Baidu Maps API aufrufen möchten, müssen Sie zunächst einen Baidu Maps API-Schlüssel erhalten.

Die Beantragung eines Schlüssels ist sehr einfach. Auf der Homepage der Baidu Maps API finden Sie die entsprechenden Links. Geben Sie die entsprechenden Informationen ein und Baidu gibt Ihnen einen Schlüssel.

Der nächste Schritt ist die Einführung der Baidu Maps API

Der Schlüsselcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Als nächstes können wir eine Karte erstellen und es ausprobieren. (Js-Code)

Code kopieren Der Code lautet wie folgt:

var map = new BMap.Map("container"); // Eine Karteninstanz erstellen
var point = new BMap.Point(120.391655,36.067588); // Punktkoordinaten erstellen
map.centerAndZoom(point, 15);
//map.centerAndZoom("Beijing", 15);
//map.centerAndZoom("Hongkong", 15);

                                            
Hier müssen drei Punkte erläutert werden: 1.map.centerAndZoom-Methode erstellt eine Karte. Der erste Parameter kann darin bestehen, eine Karte basierend auf einem zuvor erstellten Punkt als Mittelpunkt oder eine Karte basierend auf dem chinesischen Namen eines Stadtgebiets zu erstellen. (Bei richtiger Schreibweise kann es auf Basis des englischen Namens der Stadt erstellt werden)

2. Der zweite Parameter von map.centerAndZoom ist die Kartenzoomstufe, das Maximum ist 19 und das Minimum ist 0. (Aber eigentlich, wenn es auf 3 reduziert wird...)

3. Die BMap.Map-Methode erfordert beim Erstellen einer Karte einen Container (die Karte passt sich automatisch an die Größe des Containers an). Geben Sie die ID des entsprechenden Containers ein.

Informationen zur Kartengröße:

Kann bestanden werden

Code kopieren Der Code lautet wie folgt:

map.setZoom();

Methode steuert aktiv die Kartengröße.

Sie können es auch einstellen

Code kopieren Der Code lautet wie folgt:

map.enableScrollWheelZoom(true);

Verwenden Sie das Mausrad, um die Größe zu steuern.

Baidu Map bietet uns einen sehr reichhaltigen Funktionsraum.

1.Control: Die abstrakte Basisklasse des Controls. Alle Controls erben die Methoden und Eigenschaften dieser Klasse. Mit dieser Klasse können Sie benutzerdefinierte Steuerelemente implementieren.

2.Navigationssteuerung: Kartenschwenk- und Zoomsteuerung, die sich auf dem PC standardmäßig in der oberen linken Ecke der Karte befindet. Sie umfasst die Funktion zur Steuerung des Schwenkens und Zoomens der Karte. Die mobile Version bietet eine Zoomsteuerung, die sich standardmäßig unten rechts auf der Karte befindet.

3.OverviewMapControl: Die Miniaturansicht-Kartensteuerung, die sich standardmäßig unten rechts auf der Karte befindet, ist eine faltbare Miniaturansicht-Karte.

4.ScaleControl: Die Maßstabssteuerung, die sich standardmäßig unten links auf der Karte befindet, zeigt das Maßstabsverhältnis der Karte an.

5.MapTypeControl: Kartentypsteuerung, standardmäßig in der oberen rechten Ecke der Karte platziert (Karte, Satellit, 3D).

6.CopyrightControl: Urheberrechtskontrolle, standardmäßig unten links auf der Karte platziert.

7.GeolocationControl: Positionierungssteuerung, entwickelt für mobile Endgeräte, standardmäßig unten links auf der Karte platziert.

Rendering

Code kopieren Der Code lautet wie folgt:

map.addControl(new BMap.NavigationControl());//Zoom- und Schwenksteuerung
map.addControl(new BMap.ScaleControl()); //Scale
map.addControl(new BMap.OverviewMapControl());//Thumbnail
map.addControl(new BMap.MapTypeControl()); //Kartentyp
map.setCurrentCity("Qingdao");


Remarque : la fonction de commutation de MapTypeControl n'est disponible que lorsque les informations sur la ville sont définies

Événement cartographique :
La plupart des objets de l'API Baidu Map contiennent la méthode addEventListener, grâce à laquelle nous pouvons écouter les événements des objets.
Exemple :

Copier le code Le code est le suivant :

map.addEventListener("clic", function(){ 
alert("Vous avez cliqué sur la carte.");
});

Lorsque nous ne voulons plus écouter les événements, nous pouvons supprimer l'écouteur d'événements. Chaque objet API fournit removeEventListener pour supprimer les fonctions d'écoute d'événements.

Copier le code Le code est le suivant :

map.removeEventListener("click", functionA);
map.addEventListener("clic", functionA);

Couverture de la carte :

Overlay : La classe de base abstraite des superpositions. 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 une é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.

Exemple d'annotation :

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

La description ci-dessus représente l'intégralité du contenu de cet article. J'espère qu'elle sera utile à tous ceux qui utilisent l'API Baidu Map.