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
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 :
getLocation: function ()
{
var that = this wx.getLocation(
{
success: function (res) {
console.log(res)
that.setData({
hasLocation: true,
location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
})
}
})
},Documentation de l'interface : http:// /m.sbmmt.com/
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)
// })
}
})
}
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
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
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | Array | [] | mode为 selector 时，range 有效 |
| value | Number | 0 | mode为 selector 时，是数字，表示选择了 range 中的第几个，从0开始。 |
| bindchange | EventHandle | value改变时触发change事件，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} |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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: ['美国', '中国', '巴西', '日本'],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', 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!
Comment illuminer le moment des amis proches de Douyin
Avantages du téléchargement du site officiel de l'application Yiou Exchange
Comment accéder au lecteur D avec cmd
Que dois-je faire si mon compte QQ est volé ?
Migrer les données d'un téléphone Android vers un téléphone Apple
utilisation de la fonction de tri de Python
Introduction au contenu principal du travail des ingénieurs front-end
Temps d'affichage des photos
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
