Explication détaillée de l'exemple de code de positionnement de la carte du mini programme WeChat

Cet article explique principalement en détail les informations pertinentes de l'exemple de code de positionnement de l'applet WeChat Map, et joint l'exemple de code et les rendus d'implémentation. Les amis dans le besoin peuvent se référer à

Positionnement de la carte de développement du programme WeChat Mini.

Le mini-programme WeChat vient de sortir il n'y a pas longtemps. Je souhaite apprendre le contenu moi-même pour un développement futur. Si je veux prendre du retard sur les autres, voici un exemple simple de mini-programme. s'y référer

Fonctions obligatoires à remplir :

1. Le point clé à compléter est le positionnement de la ville.

2. Changez simplement de ville.

Pour la page d'accueil, on se réfère d'abord au document officiel ouvert par l'applet WeChat pour trouver :

Ici on retrouve le " latitude et longitude de l'emplacement actuel"

getLocation: function ()
{
　　var that = this wx.getLocation(
　　{
　　　　success: function (res) {
　　　　　　　　 console.log(res)
　　　　 that.setData({
　　　　　　 hasLocation: true,
　　　　　　 location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
　　　　})
　　　　}
　　})
},

//Convertissez la longitude et la latitude en noms de villes et adresses, voir Baidu Maps

Documentation de l'interface  : 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)
　　// })
　　}
})
}

Le document utilisant le L'applet WeChat ici a une requête https

Il y a des cas ici que je n'expliquerai pas en détail :

Les données imprimées par le code ci-dessus sont :

renderReverse&&renderReverse(
{"status":0,
"result":
{"location":{"lng":114.05786799999997,"lat":22.543098999645019},
"formatted_address" :"138-5 Fuhua 1st Road, district de Futian, ville de Shenzhen, province du Guangdong",
"business":"Parc commercial, Xinzhou, lac Xiangmi",
"addressComponent":{"country":"Chine","country_code":0,"province":"Province du Guangdong","city":"Ville de Shenzhen","district":"Futian Quartier","adcode":"440304","street":"Fuhua 1st Road","street_number":"138-5","direction":"à proximité","distance":" 18"},"pois":[{"addr":"N° 138, Fuhua 1st Road, District de Futian, Shenzhen","cp":" ","direction":"Nord","distance":"51 "," name":"Bâtiment de la Chambre de commerce internationale de Shenzhen","poiType":"Immobilier","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"Immobilier ; Immeuble de bureaux","tel": "","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"No. 98, Fuhua 1st Road","cp ":" ","direction":" Sud","distance":"60","name":"Excellent immeuble","poiType":"Immobilier","point":{"x":114.05777870287507, "y":22.543597255274773},"tag": "Immobilier ; Immeuble de bureaux","tel":"","uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"Quartier de Futian , Shenzhen City","cp":" ","direction ":"Nord-Ouest","distance":"236","name":"Shopping Park","poiType":"Shopping","point":{ "x":114.05972802583108,"y":22.54214523984097}," tag":shopping; centre commercial","tel":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr ":"Côté sud de la 1ère route de Fuhua","cp": " ","direction":"Nord-ouest","distance":"123","name":"Bâtiment de la banque d'investissement","poiType":"Real Estate","point":{"x":114.05829972007068,"y" :22.54214523984097},"tag":"Immobilier;Immeuble de bureaux","tel":"","uid":"b3a40a67bedbe7782fb17ea0","zip ":""},{"addr":"Bâtiment A de la Chambre de commerce internationale du district de Futian de Shenzhen ","cp":" ","direction":"Nord-est","distance":"77","name": "Bâtiment de la Chambre de Commerce Internationale de Shenzhen, Tour A", "poiType": "Immobilier", "point" ; "No. 88 Fuhua 1st Road", "cp": ", "direction": "ouest" ,"distance":"131","name":"Bâtiment central des affaires","poiType":"Immobilier ","point":{"x":114.05899141531315,"y":22.54275442061121},"tag": "Immobilier ; Immeuble de bureaux","tel":"","uid":"cac5fc76d0304d8e2db96d8b","zip":" "},{"addr":"Premier étage, bâtiment d'affaires central, n° 88 Fuhua 1st Road , District de Futian, Shenzhen","cp":" ","direction":"ouest","distance":"134","name ":"China Merchants Bank (Branche commerciale centrale)","poiType":" Finance","point":{"x":114.05900039836824,"y":22.542704351061439},"tag":"Finance;Banque","tel ":"","uid":"c7fb04bd3d531f6bfa0cadef","zip": ""},{"addr": "N° 28, Fuhua 1st Road, Futian Central District, Shenzhen (à côté du bâtiment d'investissement)", "cp": ", "direction": "西", "distance" :"229","name":"Hôtel Marco Polo Shenzhen","poiType":"hôtel","point":{"x":114.05991666998811, "y":22.54288793932078},"tag":"hôtel;star hôtel","tel":"","uid":"0523a14106ceb804b23c8142","zip":""},{"addr": "Étage B1, Parc Commercial, No. 208 Fuhua 1st Road", "cp": ", "direction": "Nord-Ouest", "distance": "234", "name": AEON Supermarché (Shopping Park Store)","poiType":"Shopping","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"Shopping;Supermarché","tel":"" ," uid": "9884a864bb2c032af8dc85d1", "zip": ""}, {"addr": "17-18e étage, bâtiment de la banque industrielle, n° 4103, avenue Shennan, district de Futian, Shenzhen", "cp": " ,"direction": "Sud-ouest","distance":"158","name":"Bureau notarial de Shenzhen (route n° 1)","poiType":"Agence gouvernementale","point":{"x" :114.05857819477869,"y ":22.54424815372944},"tag":"Agences gouvernementales;Agences de sécurité publique et judiciaire","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}]," poiRegions":[],"sematic_description ":"51 mètres au nord du bâtiment de la Chambre de commerce internationale de Shenzhen","cityCode":340}})

Il vous suffit de trouver la ville et de la passer.

La deuxième étape consiste à changer de ville :

Dans la documentation de développement de notre applet WeChat trouvée cette fois, il y a

picker

le sélecteur à défilement, qui prend désormais en charge trois sélecteurs, distingués respectivement par mode , sont des sélecteurs ordinaires, sélecteur d'heure, sélecteur de date, et la valeur par défaut est le sélecteur ordinaire.

Sélecteur normal : mode = sélecteur

< th>Attribut

属性名	类型	默认值	说明
range	Array	[]	mode为 selector 时，range 有效
value	Number	0	mode为 selector 时，是数字，表示选择了 range 中的第几个，从0开始。
bindchange	EventHandle		value改变时触发change事件，event.detail = {value: value}

NomType Par défaut valeurDescriptionplage

Tableau < /td>[]Lorsque le mode est sélecteur, la plage est validevaleurNombre 0Lorsque le mode est sélecteur, il s'agit d'un nombre indiquant quel nombre de la plage est sélectionné, à partir de 0. bindchangeEventHan dle Déclenché lorsque la valeur change changeÉvénement

, event.detail = {value: value}

Sélecteur d'heure : mode =
heure

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle		value改变时触发change事件，event.detail = {value: value}

Nom de l'attribut	Type	Valeur par défaut	Description
valeur	String		représente l'heure sélectionnée, le format est " hh:mm"
start	String		représente le début de la plage horaire valide, Chaîne Le format est "hh:mm"
end	Chaîne		indique la fin de la plage horaire valide, le format de chaîne est "hh:mm"
bindchange	EventHandle		L'événement de changement est déclenché lorsque la valeur change, event.detail = {value: value}

Sélecteur de date : mode =

date

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为"yyyy-MM-dd"
start	String		表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
end	String		表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fields	String	day	有效值year,month,day，表示选择器的粒度
bindchange	EventHandle		value改变时触发change事件，event.detail = {value: value}

<🎜><🎜><🎜><🎜><🎜>

注意：开发工具暂时只支持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 >

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!