Maison > Article > interface Web > Le positionnement HTML5 obtient l'emplacement actuel et l'affiche sur les compétences du didacticiel Baidu map_html5

Le positionnement HTML5 obtient l'emplacement actuel et l'affiche sur les compétences du didacticiel Baidu map_html5

WBOYoriginal: 2016-05-16 15:47:262486parcourir

Lors du développement d'un site Web mobile ou d'une application Web, 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( callback);

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 alors initialiser la carte, définir le contrôle, le centre ; point, niveau de zoom, puis ajoutez des points à la carte Superposition :

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); 15 est le niveau de zoom de la carte, et le niveau maximum est de 18
var pointMarker = new BMap(point);
map.addOverlay(pointMarker); , cela ne suffit pas et les résultats affichés ne sont pas précis. En effet, les coordonnées obtenues par getCurrentPosition sont des coordonnées GPS de longitude et de latitude, et les coordonnées de la carte Baidu sont spécialement converties. Par conséquent, une étape de conversion des coordonnées est requise entre l'obtention. les coordonnées de positionnement et l'initialisation de la carte. Cette méthode de conversion a été fournie dans l'API Baidu, et la méthode de conversion d'un point ou d'un lot est Les deux sont fournies : la conversion d'un point unique doit se référer à http://developer.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 :

Copiez 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 les nouvelles coordonnées Cliquez

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

Copier le code

Le le code est le suivant :

"viewport" content="initial-scale=1.0, user-scalable=no" />