Bonjour le monde
Le moyen le plus simple de commencer à apprendre l'API Baidu Map est de regarder un exemple simple. Le code suivant crée une carte avec Tiananmen comme centre de la carte :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>Ci-dessous nous vous présentons étape par étape :
Préparez la page
Selon la norme HTML, chaque document HTML doit être déclaré correct Pour les types de documents, nous vous recommandons d'utiliser la dernière déclaration de document conforme à la spécification HTML5 :
<!DOCTYPE html>
Vous pouvez également choisir d'autres types de déclarations de document selon vos besoins, afin que le navigateur restitue la page de manière standard pour assurer une compatibilité maximale de la page sexe. Nous vous déconseillons d'utiliser le mode Quirks pour le développement.
Ensuite, nous ajoutons une balise méta pour améliorer l'affichage de votre page sur les plateformes mobiles.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Ensuite, nous définissons le style pour que la carte remplisse toute la fenêtre du navigateur :
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>Référencez le fichier API de la carte Baidu Utilisez la méthode de référence de la V1.4 et des versions précédentes :
Créez une carte élément conteneur La carte nécessite un élément HTML comme conteneur pour pouvoir être affichée sur la page. Ici, nous avons créé un élément div.
Espace de noms L'API utilise BMap comme espace de noms et toutes les classes se trouvent sous cet espace de noms, telles que : BMap.Map, BMap.Control et BMap.Overlay.
Créer une instance de carte
var map = new BMap.Map("container");La classe Map située sous l'espace de noms BMap représente une carte, et une instance de carte peut être créée via l'opérateur new. Son paramètre peut être un identifiant d'élément ou un objet élément.
Notez que lorsque vous appelez ce constructeur, vous devez vous assurer que l'élément conteneur a été ajouté à la carte.
Créer des coordonnées de point
var point = new BMap.Point(116.404, 39.915);
Ici, nous utilisons la classe Point sous l'espace de noms BMap pour créer un point de coordonnées. La classe Point décrit un point de coordonnées géographiques, où 116,404 représente la longitude et 39,915 représente la latitude.
Initialisation de la carte
map.centerAndZoom(point, 15);
Après avoir créé l'instance de carte, nous devons l'initialiser. La méthode BMap.Map.centerAndZoom() nécessite de définir les coordonnées du point central et le niveau de la carte. La carte doit être initialisée avant que d'autres opérations puissent être effectuées.
Configuration et fonctionnement de la carte
Une fois la carte instanciée et initialisée, vous pouvez interagir avec elle. L'apparence et le comportement des objets cartographiques dans l'API sont très similaires aux cartes avec lesquelles vous interagissez sur le site Web Baidu Map. Il prend en charge des fonctions interactives telles que le glissement de la souris, le zoom avec la molette et le double-clic pour zoomer. Vous pouvez également modifier la configuration pour changer ces fonctionnalités. Par exemple, par défaut, la carte ne prend pas en charge l'opération de zoom avec la molette de la souris, car cela peut affecter l'expérience utilisateur de la page entière, mais si vous souhaitez utiliser la molette de la souris pour contrôler le zoom sur la carte, vous pouvez appeler la carte. méthode activateScrollWheelZoom pour l’activer. Les options de configuration se trouvent dans la section Méthodes de configuration de la référence de la classe Map.
De plus, vous pouvez interagir avec la carte par programmation. La classe Map fournit plusieurs méthodes pour modifier l'état de la carte. Par exemple : setCenter(), panTo(), zoomTo(), etc.
L'exemple ci-dessous montre une carte qui se déplacera vers un nouveau point central après avoir attendu deux secondes. La méthode panTo() déplacera en douceur la carte vers le nouveau point central. Si la distance de déplacement dépasse la taille actuelle de la zone de la carte, la carte passera directement à ce point.
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
