WeChat Miniプログラムの実施 都市の位置付け

この記事では、WeChat ミニプログラムでの都市位置特定の実装例を詳しく紹介しています。この記事の紹介は非常に詳細であると思います。必要とするすべての人にとっての参考と学習の価値を以下で一緒に見てみましょう。

前書き

WeChat アプレットでは、wx.getLocation() を呼び出すことで、デバイスの現在の地理的位置情報を取得できます。この情報は、現在の地理的位置の経度と緯度です。位置。現在位置がどの国や都市にあるかなどの情報を取得したい場合、どうすればこれを実現できるでしょうか。 wx.getLocation()获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家，哪个城市等信息，该如何实现呢？

实现方法

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

実装方法

WeChatアプレットではそのようなAPIは提供していませんが、wx.getLocation()で取得した経度・緯度を基にすれば大丈夫です。残りの部分については、Tencent Maps や Baidu Maps API などの他のサードパーティの地図サービスを使用してこれを実現できます。

Tencent Map を例に挙げると、Tencent Map オープン プラットフォームにアカウントを登録し、その管理バックグラウンドでキーを作成できます。

その後、トップメニューに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 中国語 Web サイトにご注意ください。 関連する推奨事項:

WeChat アプレットを通じて現在地の緯度と経度の座標を取得する方法

WeChat アプレットの 3 レベルのリンケージ セレクターを使用する方法

🎜🎜🎜🎜

以上がWeChat Miniプログラムの実施 都市の位置付けの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。