微信小程式之map元件初體驗

• 此文為筆者初次嘗試map元件後的學習筆記，由于筆者功力有限，如有不足，還望指教

• 參考資料：

  map元件

  map元件相關api

  效果圖：

  

  直接上代碼（其中有我個人了解的注釋）：
  1. wxml

<view class="page-body">
           <view class="page-section page-section-gap">
             <map
               id="myMap"
               style="width: 100%; height: 300px;"
               latitude="{{latitude}}"
               longitude="{{longitude}}"
               markers="{{markers}}"
               show-location
             ></map>
           </view>
           <view class="btn-area">
             <button bindtap="getCenterLocation" class="page-body-button" type="primary">定位到目前位置</button>
             <button bindtap="translateMarker" class="page-body-button" type="primary">移動标注到指定位置</button>
             <button bindtap="includePoints" class="page-body-button" type="primary">縮放視野展示所有經緯度</button>
              <button bindtap="getRegion" class="page-body-button" type="primary">擷取目前位置視野範圍</button>
           </view>
         </view>
           

1. wxss

page {
           background-color: #f8f8f8;
           height: 100%;
           font-size: 32rpx;
           line-height: 1.6;
         }
         
         .page-body {
           padding: 20rpx 0;
         }
         
         .page-section-gap {
           box-sizing: border-box;
           padding: 0 30rpx;
         }
         
         .btn-area {
           margin-top: 60rpx;
           box-sizing: border-box;
           width: 100%;
           padding: 0 30rpx;
         }
         
         .page-body-button {
           margin-bottom: 30rpx;
         }
           

1. javascript

Page({
           data: {
             //緯度
             latitude: 30.319739999999985,
             //經度
             longitude: 112.222,
             //标記點
             markers: [{
               //标記點 id
               id: 1,
               //标記點緯度
               latitude: 32.319739999999985,
               //标記點經度
               longitude: 120.14209999999999,
               name: '行之目前的位置'
             }],
           },
           onReady: function (e) {
             //擷取map上下文
             //參數：
             //string mapId
             //Object this
             this.mapCtx = wx.createMapContext('myMap')
           },
           //擷取目前位置經緯度，并把定位到相應的位置
           getCenterLocation: function () {
             //擷取目前位置：經緯度
             this.mapCtx.getCenterLocation({
               success:res=>{
                 //擷取成功後定位到相應位置
                 console.log(res);
                 //參數對象中設定經緯度，我這裡設定為擷取目前位置得到的經緯度值
                 this.mapCtx.moveToLocation({
                   longitude:res.longitude,
                   latitude:res.latitude
                 })
               }
             })
           },
           //移動标記（marker）到指定位置
           translateMarker: function() {
             //平移marker
             this.mapCtx.translateMarker({
               //要平移的marker的id
               markerId: 1,
               //移動過程中是否自動旋轉 marker
               autoRotate: true,
               //動畫持續時長，平移與旋轉分别計算
               duration: 1000,
               //平移到的目的地，參數為經緯度
               destination: {
                 latitude:33,
                 longitude:113.3345211,
               },
               //平移動畫後的回調函數
               animationEnd() {
                 console.log('動畫結束')
               }
             })
           },
           //縮放視野展示所有經緯度
           includePoints: function() {
             this.mapCtx.includePoints({
               //坐标點形成的矩形邊緣到地圖邊緣的距離，機關像素。
               padding: [10],
               //有哪些要縮放的點
               points: [{
                 latitude:23.10229,
                 longitude:113.3345211,
               }, {
                 latitude:24.00229,
                 longitude:113.545211,
               }],
               success:res=>{
                 console.log("縮放成功")
               }
             })
           },
           //擷取目前位置視野範圍
           getRegion:function(){
             this.mapCtx.getRegion({
               success:res=>{
                 //東北角經緯度
                 console.log(res.northeast);
                 //西南角經緯度
                 console.log(res.southwest);
               }
             })
           }
         })
           

以上就是筆者對map元件的初次嘗試了。