이 글은 주로 WeChat 애플릿 지도 포지셔닝 예제 코드 관련 정보를 자세히 설명하고, 예제 코드와 구현 렌더링을 첨부합니다. 필요한 친구는
WeChat Mini 프로그램 개발 지도 포지셔닝.
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) // }) } }) }
renderReverse&&renderReverse(
{"status":0,
"result":
{"location":{"lng":114.05786799999997,"lat":22.543098999645019},
"formatted_address" :"광둥성 선전시 푸텐구 푸화1로 138-5",
"business":"샹미호 신저우 쇼핑파크",
"addressComponent":{"개수ry":"중국","country_code":0,"province":"광둥성","city":"심천시","district":"푸텐 구역","adcode":"440304","street":"Fuhua 1st Road","street_number":"138-5","방향":"nearby","distance":" 18"},"pois":[{"addr":"No. 138, Fuhua 1st Road, Futian District, Shenzhen","cp":" ","direction":"북쪽","distance":"51 "," name":"Shenzhen International Chamber of Commerce Building","poiType":"부동산","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"부동산; Office Building","tel": "","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"No. 98, Fuhua 1st Road","cp ":" ","방향":" 남쪽","거리":"60","name":"우수한 건물","poiType":"부동산","point":{"x":114.05777870287507, "y":22.543597255274773},"tag": "부동산; 사무실 건물","tel":"","uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"푸티안 지구 , 심천시","cp":" ","방향":"북서쪽","거리":"236","name":"쇼핑 파크","poiType":"쇼핑","point":{ "x":114.05972802583108,"y":22.54214523984097}," tag":"쇼핑; 쇼핑 센터","tel":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr ":"푸화1로 남쪽","cp": " ","방향":"북서쪽","거리":"123","name":"투자 은행 빌딩","poiType":"실제 Estate","point":{"x":114.05829972007068,"y" :22.54214523984097},"tag":"부동산 사무실 건물","tel":"","uid":"b3a40a67bedbe7782fb17ea0","zip ":""},{"addr":"심천 푸텐 지구 국제 상공회의소 빌딩 A ","cp":" ","방향":"북동쪽","거리":"77","name": "Shenzhen International Chamber of Commerce Building Tower A","poiType":"부동산","point" ; addr":"No. 88 Fuhua 1st Road","cp":" ","direction":"west" ,"distance":"131","name":"중앙 비즈니스 빌딩","poiType":"부동산","point":{"x":114.05899141531315,"y":22.54275442061121},"tag": "부동산; 사무실 건물","tel":"","uid":"cac5fc76d0304d8e2db96d8b","zip":" "},{"addr":"1층, Central Business Building, No. 88 Fuhua 1st Road , Futian District, Shenzhen","cp":" ","direction":"west","distance":"134","name ":"China Merchants Bank (Central Commercial Branch)","poiType":" Finance","point":{"x":114.05900039836824,"y":22.542704351061439},"tag":"Finance;Bank","tel ":"","uid":"c7fb04bd3d531f6bfa0cadef","zip": ""},{"addr":"No. 28, Fuhua 1st Road, Futian Central District, Shenzhen (투자 빌딩 옆)","cp":" ", "direction":"西","distance" :"229","name":"마르코 폴로 선전 호텔","poiType":"호텔","point":{"x":114.05991666998811, "y":22.54288793932078},"tag":"호텔;스타 호텔","전화":"","uid":"0523a14106ceb804b23c8142","zip":""},{"addr":"Floor B1, Shopping Park, No. 208 Fuhua 1st Road","cp":" ","direction":"북서쪽","distance":"234","name":"AEON 슈퍼마켓(쇼핑 파크 스토어)","poiType":"쇼핑","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"쇼핑;슈퍼마켓","tel":"" ," uid":"9884a864bb2c032af8dc85d1","zip":""},{"addr":"17-18층, Industrial Bank Building, No. 4103 Shennan Avenue, Futian District, Shenzhen","cp":" " ,"방향": "남서쪽","거리":"158","name":"심천 공증 사무소(1번 도로)","poiType":"정부 기관","point":{"x" :114.05857819477869,"y ":22.54424815372944},"tag":"정부 기관, 공공 보안 및 사법 기관","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}]," poiRegions":[],"sematic_description ":"심천 국제 상공회의소 건물에서 북쪽으로 51미터","cityCode":340}})
도시를 찾아 통과하기만 하면 됩니다.
두 번째 단계는 도시를 바꾸는 것입니다:
이번에 발견한 WeChat 애플릿 개발 문서에는
스크롤 선택기는 일반 선택기, 시간 선택기, 날짜 선택기이며, 기본값은 일반 선택기입니다.
일반 선택기: 모드 = 선택기
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
range | Array | [] | mode为 selector 时,range 有效 |
value | Number | 0 | mode为 selector 时,是数字,表示选择了 range 中的第几个,从0开始。 |
bindchange | EventHandle | value改变时触发change事件,event.detail = {value: value} |
시간 선택기: 모드 =
시간
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 表示选中的时间,格式为"hh:mm" | |
start | String | 表示有效时间范围的开始,字符串格式为"hh:mm" | |
end | String | 表示有效时间范围的结束,字符串格式为"hh:mm" | |
bindchange | EventHandle | value改变时触发change事件,event.detail = {value: value} |
속성 이름 | 유형 | 기본값 | 설명 |
---|---|---|---|
값 | String | 는 선택한 시간을 나타내며 형식은 " hh:mm" | |
start | String | 는 유효한 시간 범위의 시작을 나타냅니다. 문자열 형식은 "hh:mm" |
|
end | String | 는 유효한 시간 범위의 끝을 나타내며 문자열 형식은 "hh:mm"입니다. | tr>|
bindchange | EventHandle | 값이 변경되면 변경 이벤트가 트리거됩니다. 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 >
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
위 내용은 WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!