前幾個月寫了一篇關于map組件的使用方式?uniapp 地圖組件（map）的使用總結，上個月我們公司將整個小程序進行了一次重構，地圖這邊也有很多修改的地方，看見小伙伴對于上一篇文章寫的使用和有些功能有些不清楚。愛掏網 - it200.com一直都想重新寫一篇文章進行總結，因為工作原因（太懶了）一直沒機會。愛掏網 - it200.com正好趁這次1024活動于是決定將文章重新總結一下。愛掏網 - it200.com
已經創建項目的同學可以跳過
首先打開我們的hbuilderX（沒有的小伙伴可以自行下載哈）創建項目
1.右鍵新建項目
2.新建map-demo?
?然后運行項目
因為是新項目，我們直接在pages/index/index.vue中進行后續的邏輯編寫?
關于閱讀文檔也是我在寫這篇文章的時候因為也有一段時間沒有看文檔了，不確定文檔是否有變動，然后在讀的時候想到之前那篇文章會有同學問各種一查文檔就能知道的問題，我就尋思著將閱讀文檔寫一段，就是教不會看文檔的同學如何看這種文檔，老鳥可以直接跳下一段的部分。愛掏網 - it200.com
首先我們打開uniapp的文檔map | uni-app官網
?1.平臺差異性
首先我們看上面圖片，第一個是我們的平臺差異性，簡單點說就是我們的兼容問題。愛掏網 - it200.com同學們可以根據自己的項目跟上面進行對比，是否支持map
2.地圖服務商說明
第二個我們的地圖服務說明我們是使用的原生的，在我們小程序中就是使用的騰訊的地圖，包括后續的經緯度坐標我們都需要參考騰訊的進行轉換，否則會出現地圖位置偏差較大
3.屬性說明?
這邊就是我們的詳情數據，說明上面說的已經比較清楚就不一一介紹，同學們只需要關注后面一欄的平臺差異說明就行了。愛掏網 - it200.com注意兼容問題。愛掏網 - it200.com
3-1.markers?(標記點)
?這里markers就是我們渲染在地圖一個個內容
3-1-1 callout
?callout就是我們顯示的氣泡。愛掏網 - it200.com
4.circles(圓)
?這里大概就講這些我們在項目中能用得上的，剩下的同學們可以自己研究。愛掏網 - it200.com
?代碼
關于獲取位置這些可以訪問我的上一篇文章哈
uniapp 地圖組件（map）的使用總結_海海吶的博客-CSDN博客_uniapp地圖組件
首先我們想在地圖上顯示圓的話，首先需要渲染的就是渲染地圖的目標，簡單點說就是渲染在地圖的哪里（經緯度），我們上面基本配置的代碼是使用的自身的經緯度為圓心。愛掏網 - it200.com半徑為2000，同學們可以根據自己的需求配合上面文檔進行修改。愛掏網 - it200.com
有的同學在寫marker之后發現無法正常渲染，這里需要告訴大家一個問題，就是我們marker里面的經緯度必須和屬性說明 里的longitude（中心經度） 和 latitude（中心緯度）不能相離太遠，否則頁面上我們的marker的內容不會顯示出來。愛掏網 - it200.com
在上面的marker渲染我們沒有使用到圖標，所以我們的就是使用的默認的圖標，在我們實際項目中我們的ui可能會給我們一些新的圖片，我們這里就需要用到?iconPath
?在我們實際開發中我們的產品可以想著將我們自身的點位也展示在頁面上，怎么展示呢。愛掏網 - it200.com
在我們的官方文檔上有了一種方法，show-location??
這個方法可能已經滿足了大部分用戶的使用了，?
這里給大家展示另外一種方式
圖一
圖二?
? ? ? ?仔細看上圖，我們的marker渲染的圖標是使用的紅色的圓形，第二張圖的黑色就是我們用戶選擇的位置。愛掏網 - it200.com這個是怎么實現的呢？
? ? ? ?實現也很簡單，首先我們思考一下，我們圖一的marker渲染的幾個數據都是從后臺返回的，我們首先拿到用戶自身位置，或者用戶選中的特定位置之后，我們請求后臺拿到附近的位置信息。愛掏網 - it200.com后臺返回之后我們先講后臺返回的數據拼接到我們渲染的數組中，然后我們自己在寫一個對象，這個對象就是我們的用戶自身位置，或者是用戶選擇的位置，（獲取用戶自身經緯度可以看上面這篇文章uniapp 地圖組件（map）的使用總結_海海吶的博客-CSDN博客_uniapp地圖組件），然后我們自己組裝一個充當用戶自身位置的對象，push進我們的渲染數組中。愛掏網 - it200.com這樣就可以實現上面的效果。愛掏網 - it200.com
后續發現其他問題也會繼續在這上面更新
如果你還有什么問題你可以選擇↓↓↓
微信公眾號搜索?海海學前端?來了解更多