先放上微信小程序中地圖組件的官方文檔，推薦先查看官方文檔，基礎部分只會稍帶提一下，主要講在開發(fā)《地圖》這款微信小程序時遇到的一些問題，以及解決方案。

   下面會根據(jù)開發(fā)《地圖》期間遇到的地圖組件問題進行講述，《地圖》把微信提供的地圖二次開發(fā)能力基本上都使用了，可以掃描下方二維碼進行體驗

    地圖提供的外賣地圖、公園小區(qū)導航路線,并且能夠自己手繪地圖路線并分享。

    地圖

    基礎用法

   map組件與view等常見組件類似，只是多了較多的參數(shù)，具體參數(shù)的含義可以參考官方文檔。需要說明的是map組件的寬高是由組件樣式直接設置的，對于在外面套用一層view，通過控制外層view的寬高，來控制map組件的寬高是不可行。

   如果是平常的展示地圖，只需要關注參數(shù)列表中的必填項即可。對于進行更復雜的開發(fā)則需要關注controls、markers、polyline以及支持的事件。

    初始定位以及定位時機

   地圖組件使用時longitude、latitude兩個屬性是必填項，分別表示中心點經度、中心點緯度。這是定位需要關注的屬性。

   由于小程序定位是異步執(zhí)行的，可能在小程序屏已經渲染出來了，定位還未成功，所以推薦為longitude、latitude兩個屬性設置默認值，默認值可以設置成你更關注的區(qū)域內的坐標。

    定位時機可以選在onLoad時：

    定位失敗的原因，一般都是用戶拒絕定位授權，所以在fail的回調函數(shù)中應該做的就是：

   提醒用戶打開授權->跳轉設置頁->檢查是否開啟授權->為true時重新調用定位（推薦將定位流程封裝一下）。

    若用戶仍然拒絕授權，只是就別再走上述流程了（死循環(huán)），體驗比停止服務還差。

    個性地圖使用

    關于個性地圖，騰訊地圖有一篇完整的教程，我直接貼鏈接

    個性地圖使用指南-微信小程序解決方案|騰訊位置服務

    地圖上下文

    地圖上下文是地圖組件的API，推薦先熟悉一下，其提供的能力有：

    ?獲取當前地圖中心的經緯度

    ?獲取當前地圖的視野范圍

    ?獲取當前地圖的旋轉角

    ?獲取當前地圖的縮放級別

    ?獲取當前地圖的傾斜角

    ?縮放視野展示所有經緯度

    ?將地圖中心移置當前定位點

    ?平移marker，帶動畫

   我們做二次開發(fā)時，大部分需要使用這些API，使用這些API的前提是創(chuàng)建地圖上下文MapContext，推薦在頁面OnReady時創(chuàng)建：

    其他地方使用地圖上下文只需要使用this.mapCtx即可

    地圖控件開發(fā)

   上面簡單介紹了一下MapContext，下面我們使用其來實現(xiàn)常見的地圖控件，地圖組件官方文檔提示組件的controls屬性即將被廢棄，推薦使用cover-view來實現(xiàn)，所以我們就是使用cover-view開發(fā)地圖控件。

    1、移動后快速回到原點（定位功能）

    https://使用地圖上下文，將地圖視野中心移到定位點

    2、圖層切換

    這里切換圖層主要是指對衛(wèi)星影像圖層的開關。

    *切換圖層

    3、包含所有點

   思路：由于控件時常用的，所以在次解析地圖數(shù)據(jù)時就將需要包含的點解析到一個數(shù)組Array中，后面直接調用即可

    上面wxml部分沒有關于該控件的布局，可以參考上面兩個控件