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

이 글은 주로 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)//这里是获取经纬度
　　　　})
　　　　}
　　})
},

//경도와 위도를 도시 이름과 거리 주소로 변환, 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

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

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

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개의 선택기를 지원하는

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

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

< th>속성

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

이름유형 기본값 값설명범위

배열 < /td>[]모드가 선택자인 경우 범위가 유효합니다.값숫자 0모드가 선택기인 경우 0부터 시작하여 범위 내에서 어떤 숫자가 선택되었는지 나타내는 숫자입니다. bindchangeEventHan dle 값이 변경될 때 트리거됨이벤트

, event.detail = {값: 값}

시간 선택기: 모드 =
시간

属性名	类型	默认值	说明
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"입니다.
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
  })
 }
})

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