简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > WeChat アプレット > ミニプログラム開発 > 本文

WeChatミニプログラム地図位置決めサンプルコードの詳細説明

高洛峰
リリース： 2017-03-19 09:09:51
オリジナル
4819 人が閲覧しました

この記事は主に、WeChat ミニ プログラム Map 位置決めサンプル コードの関連情報を詳細に説明し、サンプル コードと実装レンダリングを添付します。必要な友人は、

WeChat ミニ プログラム開発地図位置決めを参照してください。

WeChat ミニ プログラムは最近リリースされたばかりで、将来の開発のために自分で学習したい場合は、完成する簡単なミニ プログラムの例を参照してください。

WeChatミニプログラム地図位置決めサンプルコードの詳細説明

:

1. 完了すべき主なポイントは都市の位置決めです。

2. 都市を切り替えるだけです。

ホームページについては、まず WeChat ミニプログラムによって公開された公式ドキュメントを参照して次の情報を見つけます:

WeChatミニプログラム地図位置決めサンプルコードの詳細説明

ここで「現在地の経度と緯度」を見つけることができます


getLocation: function ()
{
　　var that = this wx.getLocation(
　　{
　　　　success: function (res) {
　　　　　　　　 console.log(res)
　　　　 that.setData({
　　　　　　 hasLocation: true,
　　　　　　 location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
　　　　})
　　　　}
　　})
},
ログイン後にコピー


/ /経度と緯度を都市名と番地に変換します。百度地図インターフェースを参照してくださいドキュメント: http://www.php.cn/


onLoad: function (options) {
　　console.log('onLoad')
　　var that = this;
　　wx.getLocation({
　　　　success: function (res) {
　　　　　　wx.request({
　　　　　　　　url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + res.latitude + ',' + res.longitude + '&output=json&pois=1', data: { },
　　　　　　　　header: { 'Content-Type': 'application/json' },
　　　　　　　　success: function(ops) {
　　　　　　　　　　console.log(ops.data)
　　　　　　　　}
　　　　})
　　// console.log(res)
　　// that.setData({
　　// hasLocation: true,
　　// location: formatLocation(res.longitude, res.latitude)
　　// })
　　}
})
}
ログイン後にコピー


ここでWeChatアプレットに使用されるドキュメントは次のとおりです。 https リクエストを開始します

WeChatミニプログラム地図位置決めサンプルコードの詳細説明

ここでは、場合がある場合はこれ以上説明しません:

上記のコードによって出力されるデータは次のとおりです:

renderReverse&&renderReverse(
{"status":0,
"result":
{"location":{"lng":114.05786799999997,"lat":22.543098999645019},
"formatted_address":"深セン市福田区福華、広東省 138-5 ずっと",
"ビジネス":"ショッピングパーク、新州、香密湖"、
"addressComponent":{"country":"中国","country_code":0,"province":"広東省","city":"深セン市","district":"福田区"," adcode":"440304","street":"福華一路","street_number":"138-5","方向":"近く","距離":"18"},"位置": [{"addr":"深セン市福田区福化一路138号","cp":" ","方向":"北","距離":"51","名前":"深セン国際商工会議所ビル ","poiType":"不動産","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"不動産オフィスビル","tel": "","uid":" 9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"福華一路98号","cp":" ","方向":"南", "距離":"60","名前":"卓卓ビル","poiType":"不動産","ポイント":{"x":114.05777870287507,"y":22.543597255274773},"タグ":"不動産;オフィスビル","tel":"" ,"uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"深セン市福田区","cp":" ", "方向":"北西","距離":"236","名前":"ショッピングパーク","poiType":"ショッピング","ポイント":{"x":114.05972802583108,"y":22.54214523984097} ,"tag":"ショッピング;ショッピングモール","tel ":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr":"福化一路の南側"," cp":" ","direction":"北西"," distance":"123","name":"投資銀行ビル","poiType":"不動産","point":{"x": 114.05829972007068,"y":22.54214523984097},"tag":"不動産; オフィスビル ","tel":"","uid":"b3a40a67bedbe7782fb17ea0","zip":""},{"addr":" Building A, International Chamber of Commerce Building, Futian District, Shenzhen","cp":" ","direction ":"Northeast"," distance":"77","name":"深セン国際商工会議所ビルタワーA","poiType":"不動産","point":{"x":114.05750022816707,"y": 22.54255414230188},"tag":"不動産;オフィスビル","電話":""," uid":"108ed554a3f5358229fc4892","zip":""},{"addr":"福化一路88号","cp":" ","方向":"西","距離":"131 ","name":"セントラルビジネスビル","poiType":"不動産","point":{"x":114.05899141531315 ,"y":22.54275442061121},"tag":"不動産オフィスビル" ,"tel":"","uid":"cac5fc76d0304d8e2db96d8b","zip":""},{"addr":"深セン福田市中央ビジネスビル1階、区福化一路88号"," cp":" ","direction":"west"," distance":"134","name":"招商銀行（中央業務支店）", "poiType":"Finance","point":{ "x":114.05900039836824,"y":22.542704351061439},"tag":"金融;銀行","tel":"","uid":"c7fb04bd3d531f6bfa0cadef" ,"zip":""},{"addr" :"深セン市福田中区福化一路28号（投資ビルの隣）","cp":" ","direction":"west"," distance": "229","name" :"マルコ ポーロ 深セン ホテル","poiType":"ホテル","point":{"x":114.05991666998811,"y":22.54288793932078},"tag":" ホテル;スター ホテル","電話":" ","uid":"0523a14106ceb804b23c8142","zip":""},{"addr":"福華一路208号、ショッピングパークB1階","cp":" ","direction":"北西"," distance":"234","name":"イオンスーパーマーケット (ショッピングパーク店)","poiType":"ショッピング","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"ショッピング;スーパーマーケット","電話":"" ," uid":"9884a864bb2c032af8dc85d1","zip":""},{"addr":"深セン市福田区深南大道4103号産業銀行ビル17～18階","cp":" " ,"方角": "南西","距離":"158","名前":"深セン公証役場（一路）","poiType":"政府機関","点":{"x" :114.05857819477869,"y ":22.54424815372944},"tag":"政府機関;公安および司法機関","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}]," poiRegions":[],"sematic_description ":"深セン国際商工会議所ビル北 51 メートル","cityCode":340}})

都市を見つけて渡すだけです。

第 2 ステップ都市を切り替えることです:

WeChat アカウントをもう一度見つけてください。 プログラムの開発ドキュメントには、

ピッカー

スクロール セレクターが含まれています。現在、モードによって区別される 3 つのセレクター (通常のセレクター、時間セレクター) がサポートされています。 、および 日付セレクター 。デフォルトは通常のセレクターです。

通常のセレクター: mode = selector


いつ
属性名前タイプデフォルト値説明
範囲 Array[]mode は selector、範囲は有効です
valueNumber0mode が selector の場合、範囲内のどの番号が選択されているかを示す、0 から始まる数値です。
bindchangeEventHandlechangeeventは、値が変更されるとトリガーされます。event.detail = {value: value}

Time selector: mode = time


eventhandle 日付セレクター: Mode =
属性名タイプデフォルト値説明
値文字列 は選択した時間を表し、形式は「hh:mm」です
startString は有効な時間範囲の始まりを表します、String形式は「hh:mm」です
endStringは有効な時間範囲の終わりを表します、文字列形式は " HH: mm "dBindChange
値の変更により変更イベントがトリガーされます。event.detail = {value: value}
Date


属性名値start endfieldsbindchange


注意：开发工具暂时只支持mode = selector。

示例代码：


<view class="section">
 <view class="sectiontitle">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择：{{array[index]}}
  </view>
 </picker>
</view>
<view class="section">
 <view class="sectiontitle">时间选择器</view>
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
   当前选择: {{time}}
  </view>
 </picker>
</view>

<view class="section">
 <view class="sectiontitle">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  <view class="picker">
   当前选择: {{date}}
  </view>
 </picker>
</view>
Page({
 data: {
  array: [&#39;美国&#39;, &#39;中国&#39;, &#39;巴西&#39;, &#39;日本&#39;],
  index: 0,
  date: &#39;2016-09-01&#39;,
  time: &#39;12:01&#39;
 },
 bindPickerChange: function(e) {
  console.log(&#39;picker发送选择改变，携带值为&#39;, e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
 bindDateChange: function(e) {
  this.setData({
   date: e.detail.value
  })
 },
 bindTimeChange: function(e) {
  this.setData({
   time: e.detail.value
  })
 }
})
ログイン後にコピー


WeChatミニプログラム地図位置決めサンプルコードの詳細説明


<view class="fl">
　　<text wx:if="{{ifture}}">{{cityname}}</text>
　　<text wx:else> {{array[index]}} </text>
　　<!--<view class="add-address"></view>-->
　　<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
　　<view class="add-address">
　　切换城市
　　</view>
　　</picker>
</view >
ログイン後にコピー


 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上がWeChatミニプログラム地図位置決めサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
微信小程序 地图定位
ソース：php.cn
前の記事：WeChatアプレットのログイン例の詳細説明（コード付き） 次の記事：Share jquery宝くじアプレット実装方法（コード）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1733
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1889
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1601
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1512
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1549
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！
タイプデフォルト値説明
文字列0日付、形式は「yyyy-MM-dd」です。
String は有効な日付範囲の始まりを表し、文字列形式は「yyyy-MM-dd」です
String は有効な日付範囲の終わりを表します日付範囲、文字列形式は「yyyy -MM-dd」です
Stringday有効な値は、セレクターの粒度を示す年、月、日です
EventHandle値が変更されると、change イベントがトリガーされます。event.detail = {value: value}