Exemple de positionnement et d'affichage HTML5 sur les compétences du didacticiel Baidu map_html5

Lors du développement d'un web mobile ou d'une webapp, lors de l'utilisation de l'API Baidu Map, il est souvent nécessaire d'obtenir la position actuelle via le positionnement du téléphone mobile et de l'afficher au centre de la carte. Cela nécessite l'utilisation de la fonction de géolocalisation de HTML5.

Copier le code

Le code est le suivant :

navigator.geolocation.getCurrentPosition( rappel);

Après avoir obtenu avec succès les coordonnées, la fonction de rappel sera exécutée ; le paramètre de la méthode de rappel est le point de coordonnées obtenu ; vous pourrez ensuite initialiser la carte, définir le contrôle, le point central, le niveau de zoom, puis ajouter un superposition de points sur la carte :

Copier le code

Le code est le suivant :

var map = new BMap. Map(" mapDiv");//mapDiv est l'identifiant du div où la carte est placée
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl()) ;
map.addControl (new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point est le point de coordonnées, 15 est le niveau de zoom de la 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 précis. En effet, les coordonnées obtenues par getCurrentPosition sont les coordonnées GPS de longitude et de latitude, et les coordonnées de Baidu Map ont donc été spécialement converties. obtenir les coordonnées de positionnement et initialiser Une conversion de coordonnées en une étape est requise entre les cartes. Cette méthode de conversion est déjà fournie dans l'API Baidu. Les méthodes de conversion d'un point unique ou de conversion par lots sont fournies : la conversion d'un point unique doit se référer à http://développeur. .baidu.com/map/ jsdemo/demo/convertor.js, la conversion par lots doit faire référence à http://developer.baidu.com/map/jsdemo/demo/changeMore.js, seul le premier est nécessaire ici :

Copier le code

Le code est le suivant :

BMap.Convertor.translate( gpsPoint, 0 , callback);
//gpsPoint : coordonnées avant conversion, le deuxième paramètre est la méthode de conversion, 0 signifie que les coordonnées GPS sont converties en coordonnées Baidu, fonction de rappel, le paramètre est le nouveau point de coordonnées

Le code détaillé de l'exemple est le suivant : (le ak dans la référence est la clé de l'application)

Copier le code

Le code est le suivant :

<script><br> $(function( ){<br> navigator .geolocation.getCurrentPosition(translatePoint); //Positioning<br> });<br> function translationPoint(position){<br> var currentLat = position.coords.latitude;<br> var currentLon = position.coords.longitude; <br> var gpsPoint = new BMap.Point(currentLon, currentLat);<br> BMap.Convertor.translate(gpsPoint, 0, initMap); //Convertir les coordonnées<br> }<br> fonction initMap(point){<br> //Initialiser la carte<br> map = new BMap.Map("map");<br> map.addControl(new BMap.NavigationControl());<br> map.addControl( new BMap.ScaleControl()) ;<br> map.addControl(new BMap.OverviewMapControl());<br> map.centerAndZoom(point, 15);<br> map.addOverlay(new BMap.Marker(point)) <br> }<br> </script>

< /corps>
< ;/html>

Pendant le processus de développement, j'ai senti que la vitesse de positionnement de l'ordinateur était un peu lente. Il était souvent impossible d'obtenir les coordonnées et la carte ne pouvait pas être affichée. Il est recommandé d'utiliser un téléphone portable pour tester, car le positionnement l'est. plus rapide.

Bien sûr, si vous développez uniquement des pages Web mobiles, vous n'avez pas besoin d'utiliser jQuery. Le cadre est trop grand, vous pouvez donc utiliser d'autres frameworks js mobiles légers.