Maison >interface Web >Tutoriel H5 >Mini programme pour apprendre à obtenir la géolocalisation et afficher les noms de villes

Mini programme pour apprendre à obtenir la géolocalisation et afficher les noms de villes

青灯夜游
青灯夜游avant
2018-11-10 16:26:014961parcourir

Ce que cet article vous apporte, c'est comment le mini programme apprend à obtenir le positionnement géographique et à afficher les noms de villes, afin que chacun puisse comprendre comment afficher le nom de la ville correspondant lors du positionnement dans le mini programme WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Je regardais récemment le mini programme WeChat et j'ai rencontré un problème de géolocalisation affichant les noms de villes. Cet article vise à enregistrer le processus de résolution de ce problème.

Solution

Le wx.getLocation() de l'applet obtient la longitude et la latitude et n'inclut pas le nom du lieu, vous devez donc utiliser la longitude et la latitude. La carte correspondante convertit le nom du lieu (cet article utilise Baidu Map).

Processus

1.

1), explication détaillée du code :

wx.getLocation(object) : obtenez la position géographique et la vitesse actuelles.

Remarque : l'autorisation de l'utilisateur pour l'autorisation de géolocalisation est requise

.

Pour une description détaillée des paramètres, veuillez consulter l'API du mini-programme : https://developers.weixin.qq.com/miniprogram/dev/api/location.html#wxgetlocationobjectPrenons un regardez wx. Données obtenues après le succès de getLocation() :

À partir des données obtenues, nous pouvons voir qu'il n'y a pas de nom de lieu que nous voulons, nous devons donc le faire. convertir la longitude et la latitude en Pour les noms de lieux correspondants, cet article utilise la fonction correspondante de Baidu Map pour convertir les noms de lieux correspondants.

2), Préparation de la carte Baidu

①, avant d'utiliser l'API Baidu Map, vous devez d'abord obtenir la clé Baidu Map ak , ak est généré par Baidu Maps party ;

② Ouvrez la plateforme ouverte Baidu Maps, sélectionnez « Documents de développement » > « API JavaScript du mini programme WeChat » et cliquez sur « Obtenir ». Guide de démarrage" "Il y a une introduction détaillée sur la façon de générer la clé ak, qui ne sera pas présentée dans cet article. Document de référence : http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

③ Copiez l'ak généré et collez l'ak dans le mini programme. milieu. En fait, Baidu Maps fournit un package compressé de l'API cartographique utilisée par le mini-programme, mais en raison de restrictions de taille lors de la publication du mini-programme, j'ai choisi d'utiliser des liens.

Adresse du lien de conversion en ligne de la carte Baidu : https://api.map.baidu.com/geocoder/v2/?ak=obtained AK&location=' + latitude + ',' + longitude + '&output= json'

④. Utilisez le compte du mini programme pour vous connecter à la plateforme publique WeChat (https://mp.weixin.qq.com/), sélectionnez « Paramètres de développement » dans « Paramètres » et modifiez le Baidu. Map API L'URL est ajoutée au nom de domaine légitime de la demande.

Remarque :

Baidu Map fournit un package de téléchargement pour l'API du mini programme. Si vous ne souhaitez pas utiliser d'adresse de lien, vous pouvez utiliser le package de téléchargement en raison des restrictions de taille lors de la publication des mini programmes. , cet article utilise des liens. L'adresse n'utilise pas le package de téléchargement.

 

 

⑤ A ce moment, le travail de préparation est terminé, et vous pouvez directement convertir le nom de lieu correspondant en fonction de la longitude et de la latitude dans le mini programme. Le code est comme indiqué ci-dessous.

Jetons un coup d'œil à la sortie du paramètre en cas de succès :

Il doit y avoir l'un des les paramètres obtenus vous conviennent ~~~

2. Ci-joint le code complet :

Liaison de données en wxml.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer