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

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

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

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

:

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

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

ホームページについては、まず 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 リクエストを開始します

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

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

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、範囲は有効です
value	Number	0	mode が selector の場合、範囲内のどの番号が選択されているかを示す、0 から始まる数値です。
bindchange	EventHandle		changeeventは、値が変更されるとトリガーされます。event.detail = {value: value}

Time selector: mode = time

eventhandle 日付セレクター: Mode =

属性名	タイプ	デフォルト値	説明
値	文字列		は選択した時間を表し、形式は「hh:mm」です
start	String		は有効な時間範囲の始まりを表します、String形式は「hh:mm」です
end	String		は有効な時間範囲の終わりを表します、文字列形式は " 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
  })
 }
})

<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 >

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

タイプ	デフォルト値	説明
文字列	0	日付、形式は「yyyy-MM-dd」です。
String		は有効な日付範囲の始まりを表し、文字列形式は「yyyy-MM-dd」です
String		は有効な日付範囲の終わりを表します日付範囲、文字列形式は「yyyy -MM-dd」です
String	day	有効な値は、セレクターの粒度を示す年、月、日です
EventHandle		値が変更されると、change イベントがトリガーされます。event.detail = {value: value}

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