其實前些天，吳哥就說讓我加上一個定位，我說我還沒看文件，還沒學，暫時沒加。今天上午終於開始接受map元件的挑戰，我不滴不說我真的是很懶，好吧，也有點會拒絕困難，但如果真的需要，我也可以去學習去解決，大概我的身邊缺少一個讓我有動力的吧，別問我今天怎麼就寫了啊，我只是不想讓自己這樣廢了。

        言歸正傳，在定位上，微信小程式提供了map元件，截圖來看下屬性都有哪些，看下圖，好吧，太長了，給你地址自己看吧。

        https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

       在我的專案中，需要在買房購房的左上角加入map元件，顯示實時定位。

        1.首先倒入一個定點陣圖標，推薦阿里圖示庫http://www.iconfont.cn/

        2.給新增的圖示加一個

catchtap="onMapTap"

        在JS頁面加入：

  onMapTap:function(){  //點選跳轉定位
    wx:wx.navigateTo({
      url: 'map/map',
    })
  },
 

       接下來就是map元件，在單獨建立的map目錄中，在wxml寫入：

<map id='map' longitude='115.324520' scale='10' markers='{{markers}}' bindmarkertap='markertap' polyline='{{polyline}}' style='width:100%;height:300px;'></map>

      其中，longitude='115.324520'是指中心經度，就是當開啟地圖是，以該點為中心點；scale是指縮放級別，小程式裡預設是16，在這我設定成了10；markers是標記點，一會兒放出來js程式碼，一看就明白了；bindmarkertap是點選標記點觸發，返回marker的id，在這裡，就返回id為0；polyline是指路線，一會看js程式碼。

    現在是map.js專場：

Page({
  data: {
    //地圖
    markers: [{
      iconPath: "/images/map-dw.png",   //定位小圖示
      id: 0,  
      latitude: 35.099994,      //中心經度
     longitude: 114.324520,     //中心緯度
      width: 50,      //小圖示的寬
      height: 50      //小圖示的高
    }],
    polyline: [{
      points: [{           //經緯度陣列
        longitude: 114.3245211,
        latitude: 35.10229
      }, {
        longitude: 120.324520,
        latitude: 35.21229
      }],
      color: "#ff0000dd",
      width: 2,
      dottedLine: true
    }],
  },
  markertap(event) {
    wx: wx.openLocation({
      latitude: '35.10229',
      longitude: '114.324520',
    })
  }, 
})

        我jiao得我把這個元件寫的還算清楚吧……算了，我自己也能看的明白。

        哦~對了，想做一個實現實時定位的，百度了下，是加入這個http://lbs.qq.com/qqmap_wx_jssdk/index.html，這個是騰訊地圖專門提供給微信小程式的一個包，暫時還沒開始安裝這個，所以，等我做好了，再來寫~

        切記，map在模擬執行的時候，並不能顯示太多功能，只能在真機上執行時，才能看到更多更有趣~好了，我去試試這個實時定位。