要求要完成的功能：

1.要完成的要點(diǎn)是城市定位。

2.就是切換城市。

首頁我們先參照微信小程序開放的官方文檔找到：

在這里我們可以找到”當(dāng)前位置經(jīng)緯度“

getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.log(res) that.setData({ hasLocation: true, location: formatLocation(res.longitude, res.latitude)//這里是獲取經(jīng)緯度 }) } }) }, //將經(jīng)緯度轉(zhuǎn)換成城市名和街道地址，參見百度地圖接口文檔：http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding

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) // }) } }) } 這里用到微信小程序的文檔里面有發(fā)起的是https請(qǐng)求

?

這里面有案例我就不多講解：

上面的代碼打印出來的數(shù)據(jù)是：

renderReverse&&renderReverse(
{"status":0,
"result":
{"location":{"lng":114.05786799999997,"lat":22.543098999645019},
"formatted_address":"廣東省深圳市福田區(qū)福華一路138-5",
"business":"購(gòu)物公園,新洲,香蜜湖",
"addressComponent":{"country":"中國(guó)","country_code":0,"province":"廣東省","city":"深圳市","district":"福田區(qū)","adcode":"440304","street":"福華一路","street_number":"138-5","direction":"附近","distance":"18"},"pois":[{"addr":"深圳市福田區(qū)福華一路138號(hào)","cp":" ","direction":"北","distance":"51","name":"深圳國(guó)際商會(huì)大廈","poiType":"房地產(chǎn)","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"房地產(chǎn);寫字樓","tel":"","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"福華一路98號(hào)","cp":" ","direction":"南","distance":"60","name":"卓越大廈","poiType":"房地產(chǎn)","point":{"x":114.05777870287507,"y":22.543597255274773},"tag":"房地產(chǎn);寫字樓","tel":"","uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"深圳市福田區(qū)","cp":" ","direction":"西北","distance":"236","name":"購(gòu)物公園","poiType":"購(gòu)物","point":{"x":114.05972802583108,"y":22.54214523984097},"tag":"購(gòu)物;購(gòu)物中心","tel":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr":"福華一路南側(cè)","cp":" ","direction":"西北","distance":"123","name":"投行大廈","poiType":"房地產(chǎn)","point":{"x":114.05829972007068,"y":22.54214523984097},"tag":"房地產(chǎn);寫字樓","tel":"","uid":"b3a40a67bedbe7782fb17ea0","zip":""},{"addr":"深圳福田區(qū)國(guó)際商會(huì)大廈A座","cp":" ","direction":"東北","distance":"77","name":"深圳國(guó)際商會(huì)大廈A座","poiType":"房地產(chǎn)","point":{"x":114.05750022816707,"y":22.54255414230188},"tag":"房地產(chǎn);寫字樓","tel":"","uid":"108ed554a3f5358229fc4892","zip":""},{"addr":"福華一路88號(hào)","cp":" ","direction":"西","distance":"131","name":"中心商務(wù)大廈","poiType":"房地產(chǎn)","point":{"x":114.05899141531315,"y":22.54275442061121},"tag":"房地產(chǎn);寫字樓","tel":"","uid":"cac5fc76d0304d8e2db96d8b","zip":""},{"addr":"深圳市福田區(qū)福華一路88號(hào)中心商務(wù)大廈首層","cp":" ","direction":"西","distance":"134","name":"招商銀行(中央商務(wù)支行)","poiType":"金融","point":{"x":114.05900039836824,"y":22.542704351061439},"tag":"金融;銀行","tel":"","uid":"c7fb04bd3d531f6bfa0cadef","zip":""},{"addr":"深圳福田中心區(qū)福華一路28號(hào)(投資大廈旁)","cp":" ","direction":"西","distance":"229","name":"深圳馬哥孛羅好日子酒店","poiType":"酒店","point":{"x":114.05991666998811,"y":22.54288793932078},"tag":"酒店;星級(jí)酒店","tel":"","uid":"0523a14106ceb804b23c8142","zip":""},{"addr":"福華一路208號(hào)購(gòu)物公園B1層","cp":" ","direction":"西北","distance":"234","name":"永旺超市(購(gòu)物公園店)","poiType":"購(gòu)物","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"購(gòu)物;超市","tel":"","uid":"9884a864bb2c032af8dc85d1","zip":""},{"addr":"深圳市福田區(qū)深南大道4103號(hào)興業(yè)銀行大廈17-18層","cp":" ","direction":"西南","distance":"158","name":"深圳市公證處(一號(hào)路)","poiType":"政府機(jī)構(gòu)","point":{"x":114.05857819477869,"y":22.54424815372944},"tag":"政府機(jī)構(gòu);公檢法機(jī)構(gòu)","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}],"poiRegions":[],"sematic_description":"深圳國(guó)際商會(huì)大廈北51米","cityCode":340}})

你找到city傳進(jìn)去就可以了，

第二步切換城市：

在次找到我們的微信小程序的開發(fā)文檔里面有

picker

滾動(dòng)選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時(shí)間選擇器，日期選擇器，默認(rèn)是普通選擇器。

普通選擇器：mode = selector

屬性名類型默認(rèn)值說明

range	Array	[]	mode為 selector 時(shí)，range 有效
value	Number	0	mode為 selector 時(shí)，是數(shù)字，表示選擇了 range 中的第幾個(gè)，從0開始。
bindchange	EventHandle	?	value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

時(shí)間選擇器：mode = time

屬性名類型默認(rèn)值說明

value	String	?	表示選中的時(shí)間，格式為"hh:mm"
start	String	?	表示有效時(shí)間范圍的開始，字符串格式為"hh:mm"
end	String	?	表示有效時(shí)間范圍的結(jié)束，字符串格式為"hh:mm"
bindchange	EventHandle	?	value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

日期選擇器：mode = date

屬性名類型默認(rèn)值說明

value	String	0	表示選中的日期，格式為"yyyy-MM-dd"
start	String	?	表示有效日期范圍的開始，字符串格式為"yyyy-MM-dd"
end	String	?	表示有效日期范圍的結(jié)束，字符串格式為"yyyy-MM-dd"
fields	String	day	有效值year,month,day，表示選擇器的粒度
bindchange	EventHandle	?	value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

注意：開發(fā)工具暫時(shí)只支持mode = selector。

示例代碼：

<view class="section"><view class="section__title">地區(qū)選擇器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 當(dāng)前選擇：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">時(shí)間選擇器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 當(dāng)前選擇: {{time}} </view> </picker> </view> <view class="section"> <view class="section__title">日期選擇器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 當(dāng)前選擇: {{date}} </view> </picker> </view> Page({data: {array: ['美國(guó)', '中國(guó)', '巴西', '日本'],index: 0, date: '2016-09-01', time: '12:01' }, bindPickerChange: function(e) { console.log('picker發(fā)送選擇改變，攜帶值為', 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 >

上面講的不好的請(qǐng)多多指點(diǎn)：本人只是拋磚引玉，希望有更好的方法請(qǐng)微我，本人不勝感激。。。。

轉(zhuǎn)載于:https://www.cnblogs.com/0liaoyi/p/5956696.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发demo-地图定位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。