찾다

집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명

WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명

高洛峰
高洛峰원래의
2017-03-19 09:09:514859검색

이 글은 주로 WeChat 애플릿 지도 포지셔닝 예제 코드 관련 정보를 자세히 설명하고, 예제 코드와 구현 렌더링을 첨부합니다. 필요한 친구는

WeChat Mini 프로그램 개발 지도 포지셔닝.

WeChat 미니 프로그램이 출시된 지 얼마 되지 않았습니다. 앞으로의 발전을 위해 제가 직접 콘텐츠를 배우고 싶다면 다음과 같은 간단한 미니 프로그램 예를 들어보세요. 참고하세요

WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명

완성 필수 기능 :

1. 완성해야 할 핵심 포인트는 도시 측위입니다.

2. 도시를 바꾸세요.

홈페이지의 경우 먼저 WeChat 애플릿에서 공개된 공식 문서를 참조하여 다음을 찾습니다.

WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명

여기에서 "현재"를 찾을 수 있습니다. 위치 위도 및 경도" 


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


//경도와 위도를 도시 이름과 거리 주소로 변환, Baidu 지도 참조

인터페이스 문서: 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가 있습니다. request

WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명

자세히 설명하지 않는 경우가 있습니다.

위 코드에서 출력되는 데이터는 다음과 같습니다.

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 애플릿 개발 문서에는

picker

가 있습니다. 현재 모드별로 구분되는 3개의 선택기를 지원하는

스크롤 선택기는 일반 선택기, 시간 선택기, 날짜 선택기이며, 기본값은 일반 선택기입니다.

일반 선택기: 모드 = 선택기


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

 배열 [] 모드가 선택자인 경우 범위가 유효합니다. 값 숫자 0 모드가 선택기인 경우 0부터 시작하여 범위 내에서 어떤 숫자가 선택되었는지 나타내는 숫자입니다. bindchange EventHan dle 값이 변경될 때 트리거됨이벤트, event.detail = {값: 값}

시간 선택기: 모드 =
시간

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

tr>
속성 이름 유형 기본값 설명
값 String 는 선택한 시간을 나타내며 형식은 " hh:mm"
start String 는 유효한 시간 범위의 시작을 나타냅니다. 문자열

형식은 "hh:mm"
end String 는 유효한 시간 범위의 끝을 나타내며 문자열 형식은 "hh:mm"입니다.
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: [&#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
  })
 }
})


WeChat 미니 프로그램 지도 위치 지정 예제 코드에 대한 자세한 설명


<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：WeChat 애플릿의 로그인 예에 대한 자세한 설명(코드 포함)다음 기사：WeChat 애플릿의 로그인 예에 대한 자세한 설명(코드 포함)

관련 기사

더보기