WeChat 미니 프로그램 맵 예시에 대한 자세한 설명-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

WeChat 미니 프로그램 맵 예시에 대한 자세한 설명

高洛峰

Feb 15, 2017 pm 12:46 PM

위챗 미니 프로그램 맵(MAP) 인스턴스

위챗 미니 프로그램 맵(MAP API)에서 Xiaobian이 작성한 정보입니다.

오늘의 지도 포지셔닝 모듈은 확실히 위치를 얻을 수 없습니다. 다음은 실제 기계 테스트 결과입니다.

위 사진:

微信小程序地图（map）实例详解

위도, 경도는 언급하지 않겠습니다만 여기서는 숫자 위치를 직접 입력하는데 문제가 많습니다

아래 그림과 같이 확대/축소 비율이 표시됩니다. 이 속성은 나중에 WeChat 팀에서 수정해야 합니다. 즉, 이제 막 공개 베타가 시작되었습니다. 내 지도는 위에 표시된 대로 항상 기본 확대/축소 비율입니다.

微信小程序地图（map）实例详解 필요한 경우 마커의 회전 각도입니다. 화면과 평행한 아이콘인 경우 0으로 설정하세요.

또한 오버레이 아이콘을 수정할 수 있습니다. 이전 코드:

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

로그인 후 복사

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: &#39;浦东新区&#39;, 
   desc: &#39;我的位置&#39; 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: &#39;../images/car.png&#39;, 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

로그인 후 복사

2.wx.getLocation(OBJECT) 현재 위치 API 가져오기

빨간색 상자는 경도, 위도, 속도, 정확도를 표시합니다 微信小程序地图（map）实例详解
에서 반환된 좌표를 사용하여 지도를 직접 열 수 있습니다. gch02.

특정 API에 대해서는 설명서를 참조하세요

微信小程序地图（map）实例详解

3.wx.openLocation(OBJECT) 위치 보기

가장 간단하고 조잡한 방법은 경도와 위도 위치를 직접 제공하는 것입니다.코드:

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  wx.getLocation({ 
   type: &#39;gcj02&#39;, 
   success: function (res) { 
    var latitude = res.latitude 
    var longitude = res.longitude 
    var speed = res.speed 
    var accuracy = res.accuracy 
    console.log("latitude:" + latitude) 
    console.log("longitude:" + longitude) 
    console.log("speed:" + speed) 
    console.log("accuracy:" + accuracy) 
    wx.openLocation({ 
     latitude: latitude, 
     longitude: longitude, 
     scale: 28 
    }) 
   } 
  }) 
 } 
})

로그인 후 복사

실제 머신 테스트 렌더링:

微信小程序地图（map）实例详解