Commentaire: Cet article présente principalement l'exemple du positionnement HTML5 et l'affichage sur la carte Baidu. Les amis qui en ont besoin peuvent y faire référence.
Lorsque vous développez un web mobile ou WebApps, lorsque vous utilisez l'API Baidu Map, vous devez souvent obtenir l'emplacement actuel par le positionnement du téléphone mobile et l'afficher au centre de la carte, ce qui nécessite l'utilisation de la fonction de géolocalisation de HTML5.
Navigator.Geolocation.getCurrentPosition (rappel);
Une fois les coordonnées obtenues avec succès, le rappel de la fonction de rappel sera exécuté; Le paramètre de la méthode de rappel est les points de coordonnées obtenus; Ensuite, la carte peut être initialisée, les commandes, les points centraux et les niveaux de zoom peuvent être définis, puis la superposition de point est ajoutée à la carte:
var map = new bmap.map ("mapdiv"); // mapdiv est l'ID de la div qui met la carte
map.addControl (new BMAP.NavigationControl ());
map.addControl (new Bmap.ScaleControl ());
map.addControl (new BMAP.OverviewMapControl ());
map.CenterandZoom (point, 15); // Le point est le point de coordonnées, 15 est le niveau de zoom de carte, le niveau maximum est 18
var pointmarker = new BMAP.marker (point);
map.AdDoverlay (Pointmarker);
Cependant, en fait, cela ne suffit pas et les résultats affichés ne sont pas exacts. En effet, les coordonnées obtenues par GetCurrentPosition sont des coordonnées de latitude et de longitude GPS, et les coordonnées de la carte Baidu sont spécialement converties. Par conséquent, une étape de conversion de coordonnées est requise entre l'obtention de coordonnées de positionnement et l'initialisation de la carte. Cette méthode de conversion est déjà fournie dans l'API Baidu. La méthode de conversion d'un point ou d'un remplacement par lots est fournie: une conversion de point unique nécessite une référence et une conversion par lots nécessite une référence. Ici, seul le premier est nécessaire:
BMAP.Convertor.Translate (GPSPoint, 0, rappel);
// GPSPoint: les coordonnées avant la conversion, le deuxième paramètre est la méthode de conversion, 0 signifie que la coordonnée GPS est convertie en coordonnées baidu, la fonction de rappel, le paramètre est le nouveau point de coordonnée
Le code détaillé de l'exemple est le suivant: (L'AK dans le devis est la clé appliquée)
<! Doctype html>
<html lang = "zh-cn">
<adal>
<meta content = "initial-scale = 1.0, utilisateur-échec = no" />
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
<style type = "text / css">
* {
hauteur: 100%; // définir la hauteur, sinon il ne sera pas affiché
}
</ style>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </ script>
<script type = "text / javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=············" "> </ script>
<script type = "text / javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </ script>
<cript>
$ (function () {
Navigator.Geolocation.getCurrentPosition (TranslatePoint); // positionnement
});
fonction tradlatepoint (position) {
var currentlat = position.coords.Latitude;
var currentLon = position.coords.longitude;
var gpspoint = new bmap.point (currentLon, currentLat);
Bmap.convertor.translate (gpspoint, 0, initmap); // Convertir les coordonnées
}
fonction initmap (point) {
// initialise la carte
map = new Bmap.map ("map");
map.addControl (new BMAP.NavigationControl ());
map.addControl (new Bmap.ScaleControl ());
map.addControl (new BMAP.OverviewMapControl ());
map.CenterandZoom (Point, 15);
map.addoverlay (new BMAP.marker (point))
}
</cript>
</ head>
<body>
<div> </div>
</docy>
</html>
Pendant le processus de développement, je pense que la vitesse de positionnement de l'ordinateur est un peu lente, et je ne peux souvent pas obtenir de coordonnées, donc la carte ne peut pas être affichée. Il est recommandé d'utiliser un téléphone mobile pour le tester, et le positionnement est plus rapide.
Bien sûr, si vous ne développez que des pages Web mobiles, vous n'avez pas besoin d'utiliser jQuery. Le cadre est trop grand, vous pouvez passer à d'autres cadres JS mobiles légers.