Comment utiliser les compétences api_javascript de la carte Baidu

Si vous souhaitez utiliser l'API Baidu Map, vous devez d'abord obtenir une clé API Baidu Map, puis présenter l'API Baidu Map. Ensuite, nous présenterons en détail les techniques d'obtention et d'introduction de la clé API, et. vous fournir le code. Pour une explication détaillée de l'utilisation de l'API Baidu Maps, veuillez voir ci-dessous.

Tout d'abord, si vous souhaitez appeler l'API Baidu Maps, vous devez obtenir une clé API Baidu Maps.

Demander une clé est très simple. Il existe des liens pertinents sur la page d'accueil de l'API Baidu Maps. Remplissez les informations pertinentes et Baidu vous donnera une clé.

La prochaine étape consiste à introduire l'API Baidu Maps

Le code clé est le suivant :

Copier le code Le code est le suivant :

Ensuite, nous pouvons créer une carte et l'essayer. (Code Js)

Copier le code Le code est le suivant :

var map = new BMap.Map("container"); // Créer une instance de carte
var point = new BMap.Point(120.391655,36.067588); // Créer des coordonnées de point
map.centerAndZoom(point, 15);
//map.centerAndZoom("Pékin", 15);
//map.centerAndZoom("Hong Kong", 15);

                                             
Trois points doivent être expliqués ici : La méthode 1.map.centerAndZoom crée une carte. Le premier paramètre peut être de créer une carte basée sur un point précédemment créé comme centre, ou de créer une carte basée sur le nom chinois d'une zone urbaine. (S'il est correctement orthographié, il peut être créé sur la base du nom anglais de la ville)

2. Le deuxième paramètre de map.centerAndZoom est le niveau de zoom de la carte, le maximum est de 19 et le minimum est de 0. (Mais en fait quand on le réduit à 3...)

3. La méthode BMap.Map nécessite un conteneur lors de la création d'une carte (la carte s'ajustera automatiquement en fonction de la taille du conteneur.), renseignez l'identifiant du conteneur concerné.

À propos de la taille de la carte :

Peut être réussi

Copier le code Le code est le suivant :

map.setZoom();

La méthode contrôle activement le niveau de taille de la carte.

Vous pouvez également le définir

Copier le code Le code est le suivant :

map.enableScrollWheelZoom(true);

Utilisez la molette de la souris pour contrôler la taille.

Baidu Map nous offre un espace fonctionnel très riche à utiliser.

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

2.NavigationControl : Contrôle du panoramique et du zoom de la carte, 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.

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

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

5.MapTypeControl : Contrôle de type de carte, situé par défaut dans le coin supérieur droit de la carte (carte, satellite, 3D).

6.CopyrightControl : Contrôle des droits d'auteur, situé par défaut en bas à gauche de la carte.

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

Rendu

Copier le code Le code est le suivant :

map.addControl(new BMap.NavigationControl());//Contrôle du zoom et du panoramique
map.addControl(new BMap.ScaleControl()); //Échelle
map.addControl(new BMap.OverviewMapControl());//Vignette
map.addControl(new BMap.MapTypeControl()); //Type de carte
map.setCurrentCity("Qingdao");


注意：設定城市資訊時，MapTypeControl的切換功能才能可用

地圖事件：
百度地圖API中的物件大多含有addEventListener方法，我們可以透過此方法監聽物件事件。
例：

複製程式碼 程式碼如下:

map.addEventListener("click", function(){   
 alert("您點擊了地圖。");   
});

當我們不再希望監聽事件時，可以將事件監聽移除。每個API物件提供了removeEventListener用來移除事件監聽函式。

複製程式碼 程式碼如下:

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

地圖遮蓋物:

Overlay：覆蓋物的抽象基底類，所有的覆蓋物均繼承此類的方法。

Marker：標註表示地圖上的點，可自訂標註的圖示。

Label：表示地圖上的文字標註，您可以自訂標註的文字內容。

Polyline：表示地圖上的折線。

Polygon：表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以為其添加填滿顏色。

Circle: 表示地圖上的圓。

InfoWindow：資訊視窗也是一種特殊的覆蓋物，它可以顯示更豐富的文字和多媒體訊息。注意：同一時刻只能有一個資訊視窗在地圖上開啟。

標註範例：

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); 
 });

以上說明就是本文的全部內容，希望對大家使用百度地圖api有幫助。