Detailed explanation of WeChat mini program development and implementation of positioning to the current city code

This article mainly introduces the relevant information about the example code of WeChat applet locating to the current city. Friends in need can refer to it

WeChat applet locating the current city

First you need to apply for Baidu Map Geocoding API

Geocoding API includes address resolution and reverse address resolution functions:

1. Geocoding: that is, address Through analysis, Baidu latitude and longitude information can be obtained from the detailed structured address to the street. For example: "No. 27, Zhongguancun South Street, Haidian District, Beijing" the result of address analysis is "lng:116.31985,lat:39.959836". At the same time, geocoding also supports direct parsing of the names of places of interest and landmark buildings to return Baidu latitude and longitude. For example: the result of address parsing of "Baidu Building" is "lng:116.30815,lat:40.056885". For general POI retrieval requirements, it is recommended to use the Place API .

2. Reverse geocoding: that is, reverse address parsing. The structured address information is obtained from Baidu longitude and latitude information. For example: "lat:31.325152,lng:120.558957" The result of reverse geocoding is "Jiangsu Province No. 318, Tayuan Road, Huqiu District, Suzhou City."

Code:

Page({ 
 data:{ 
 city:'' 
 }, 
 onLoad:function(options){ 
 this.loadInfo(); 
 }, 
 loadInfo:function(){ 
 var page=this 
 wx.getLocation({ 
 type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 
 success: function(res){ 
 // success 
 var longitude=res.longitude 
 var latitude=res.latitude 
 page.loadCity(longitude,latitude) 
 }, 
 fail: function() { 
 // fail 
 }, 
 complete: function() { 
 // complete 
 } 
 }) 
 }, 
 loadCity:function(longitude,latitude){ 
 var page =this 
 wx.request({ 
 url: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak &location='+latitude+','+longitude+'&output=json', 
 data: {}, 
 header:{ 
 'Content-Type':'application/json' 
 }, 
 success: function(res){ 
 // success 
 console.log(res); 
 var city=res.data.result.addressComponent.city; 
 page.setData({city:city}); 
 }, 
 fail: function() { 
 // fail 
 }, 
 complete: function() { 
 // complete 
 } 
 }) 
 } 
})

index.wxml

<!--index.wxml--> 
<view class="container"> 
{{city}} 
</view>

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

The above is the detailed content of Detailed explanation of WeChat mini program development and implementation of positioning to the current city code. For more information, please follow other related articles on the PHP Chinese website!