WeChat Mini 프로그램 도시 포지셔닝 구현

이 기사에서는 WeChat 미니 프로그램의 도시 포지셔닝 구현 사례를 신중하게 소개합니다. 이는 주로 현재 국가의 도시 정보에 대한 관련 정보 획득을 실현합니다. 모두를 위한 참고와 학습가치가 필요한 친구들, 아래에서 함께 살펴볼까요?

머리말

WeChat 애플릿에서는 wx.getLocation()을 호출하여 기기의 현재 지리적 위치 정보를 얻을 수 있습니다. 이 정보는 현재의 경도와 위도입니다. 위치. 현재 위치가 어느 국가와 도시에 있는지와 같은 정보를 얻으려면 어떻게 해야 합니까? wx.getLocation()获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家，哪个城市等信息，该如何实现呢？

实现方法

微信小程序中并没有提供这样的API，但是没关系，有wx.getLocation()

구현 방법

위챗 애플릿에서는 그런 API를 제공하지 않지만, wx.getLocation()로 구한 경도와 위도이면 충분합니다. 나머지 경우에는 Tencent Maps 또는 Baidu Maps API와 같은 다른 타사 지도 서비스를 사용할 수 있습니다.

Tencent Map을 예로 들면 Tencent Map Open Platform에 계정을 등록한 다음 관리 배경에서 키를 생성할 수 있습니다.

그러면 상단 메뉴에서 WebServiceAPI 메뉴를 찾을 수 있습니다:

Tencent Map WebServiceAPI

Tencent Map은 주소에 따라 경도와 위도를 가져오고, 주소에 따라 주소를 찾는 등 많은 WebServiceAPI를 제공합니다. 우리가 사용할 것은 경도와 위도를 기반으로 하는 것입니다. "역 지오코딩"이라고도 합니다.

역 지오코딩

역 지오코딩은 좌표를 텍스트 설명으로 변환하는 기능을 제공합니다. 호출 형식은 HTTP URL 형식의 API입니다. 기본 사용법은 다음과 같습니다.

http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

이 URL의 기본 매개 변수는 위도 및 경도 좌표 주소입니다. 이 URL의 키를 자신의 키로 바꾸고 브라우저에서 직접 확인하여 이와 같은 결과를 볼 수도 있습니다. 또한 다양한 매개변수 옵션을 전달하여 더 풍부한 정보를 얻을 수도 있습니다.

{
 "status": 0,
 "message": "query ok",
 "request_id": "6225548022856589453",
 "result": {
 "location": {
  "lat": 39.984154,
  "lng": 116.30749
 },
 "address": "北京市海淀区北四环西路66号彩和坊路",
 "formatted_addresses": {
  "recommend": "海淀区中关村彩和坊路中国技术交易大厦",
  "rough": "海淀区中关村彩和坊路中国技术交易大厦"
 },
 "address_component": {
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区",
  "street": "彩和坊路",
  "street_number": "北四环西路66号"
 },
 "ad_info": {
  "adcode": "110108",
  "name": "中国,北京市,北京市,海淀区",
  "location": {
  "lat": 39.984154,
  "lng": 116.307487
  },
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区"
 },
 "address_reference": {
  "business_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "famous_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "crossroad": {
  "title": "彩和坊路/北四环西路辅路(路口)",
  "location": {
   "lat": 39.985001,
   "lng": 116.308113
  },
  "_distance": 104.2,
  "_dir_desc": "西南"
  },
  "village": {
  "title": "稻香园北社区",
  "location": {
   "lat": 39.983269,
   "lng": 116.301979
  },
  "_distance": 480.1,
  "_dir_desc": "东"
  },
  "town": {
  "title": "海淀街道",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "street_number": {
  "title": "北四环西路66号",
  "location": {
   "lat": 39.984119,
   "lng": 116.307503
  },
  "_distance": 6.9,
  "_dir_desc": ""
  },
  "street": {
  "title": "彩和坊路",
  "location": {
   "lat": 39.984154,
   "lng": 116.308098
  },
  "_distance": 49.1,
  "_dir_desc": "西"
  },
  "landmark_l1": {
  "title": "北京中关村创业大街",
  "location": {
   "lat": 39.984055,
   "lng": 116.306992
  },
  "_distance": 43.9,
  "_dir_desc": "东"
  },
  "landmark_l2": {
  "title": "中国技术交易大厦",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  }
 }
 }
}

이 API의 반환 결과에서 우리는 국가, 시, 구 등 우리가 원하는 주소 정보가 들어있는 것을 확인할 수 있습니다.

다음으로 코드에서 이 API를 호출해야 합니다. API는 JSONP를 통해 호출할 수도 있고, 서버 측에서 호출할 수도 있습니다. 다음은 참조용으로 Node.js Express를 사용하여 구현한 내 코드입니다.

// 服务调用地址：http://localhost:3000/lbs/location

router.get('/lbs/location', function (req, res, next) {
 let lat = req.query.latitude
 let lng = req.query.longitude

 request.get({
 uri: 'https://apis.map.qq.com/ws/geocoder/v1/',
 json: true,
 qs: {
 location: `${lat},${lng}`,
 key: '你的腾讯地图密钥key'
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
 responseUtil.jsonSuccess(res, data)
 } else {
 responseUtil.jsonError(res, 10001, '')
 }
 })
})

그런 다음 미니 프로그램의 페이지 코드를 살펴보세요.

Page({

 data: {
 address: {}
 },

 onLoad: function () {
 //获取当前经纬度信息
 wx.getLocation({
 success: ({latitude, longitude}) => {

 //调用后台API，获取地址信息
 wx.request({
  url: 'http://localhost:3000/lbs/location',

  data: {
  latitude: latitude,
  longitude: longitude
  },

  success: (res) => {
  let info = res.data.data.result.ad_info
  this.setData({ address: info })
  },

  fail: () => {
  },

  complete: () => {
  }
 })
 }
 })
 }

})

및 A 이러한 주소 정보를 표시하는 데 사용되는 간단한 작은 프로그램 인터페이스:

<view>
 <view>{{address.nation}}</view>
 <view>{{address.city}}</view>
 <view>{{address.district}}</view>
</view>

실행 결과는 다음과 같습니다.

실행 결과
위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. , 더 많은 관련 내용은 PHP 중국어 웹사이트에 주목하세요!

관련 권장 사항:

WeChat 애플릿을 통해 위치의 위도 및 경도 좌표를 얻는 방법

🎜WeChat 애플릿의 3단계 연결 선택기를 사용하는 방법🎜🎜🎜🎜🎜🎜

위 내용은 WeChat Mini 프로그램 도시 포지셔닝 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!