Comment afficher une carte sur une page Web à l'aide de JS et Baidu Maps

<div id="map"></div>

Définissez le style du conteneur de carte dans le fichier CSS :

#map {
  width: 800px;
  height: 500px;
}

3.

Dans Créez un objet cartographique dans un fichier JS et spécifiez son niveau de zoom par défaut et l'emplacement du point central. Le code est le suivant :

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); //中心点位置
map.centerAndZoom(point, 12); //设置地图中心点和默认的缩放级别

Le BMap ici est un objet fourni par l'API Baidu Map, à travers lequel des cartes et divers composants fonctionnels de carte peuvent être créés.

4. Ajouter des contrôles de carte

Ajoutez des contrôles couramment utilisés sur Baidu Map, tels que des contrôles de zoom, des contrôles de type de carte, des contrôles d'oeil d'aigle, etc. Le code est le suivant :

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加鹰眼控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

5. Ajouter des superpositions et des étiquettes

L'ajout de superpositions et d'étiquettes personnalisées sur la carte peut être réalisé via les objets associés de BMap. Par exemple, ajoutez une annotation personnalisée :

var marker = new BMap.Marker(point); //创建一个标注
map.addOverlay(marker); //将标注添加到地图中

6. Lier les événements de la carte

Lorsque vous utilisez une carte, vous devez souvent lier certains événements pour répondre aux opérations de l'utilisateur. Par exemple, lorsque l'utilisateur clique sur la carte, une étiquette est ajoutée à la carte. Le code est le suivant :

map.addEventListener("click", function(e) {
  var marker = new BMap.Marker(e.point); //创建一个标注
  map.addOverlay(marker); //将标注添加到地图中
});

7. Géocodage et géocodage inversé

Le géocodage et le géocodage inversé sont des fonctions importantes de l'API cartographique. Le géocodage est le processus de conversion d'adresses textuelles en coordonnées géographiques, tandis que le géocodage inversé est le processus de conversion de coordonnées géographiques en adresses textuelles. L'exemple de code est le suivant :

//地理编码
var geocoder = new BMap.Geocoder();
geocoder.getPoint("北京市海淀区中关村", function(point) {
  //在地图上添加一个标注
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
}, "北京市");

//逆地理编码
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
  var addComp = rs.addressComponents;
  alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
});

Ce qui précède est le processus de base et l'implémentation des fonctions communes de l'utilisation de JS et Baidu Maps pour afficher des cartes sur une page Web. Grâce à ces exemples de code, je pense que les lecteurs peuvent rapidement maîtriser l'utilisation de l'API Baidu Map, puis développer des applications cartographiques plus riches et plus pratiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!