uni-app 之地圖 map
怎么說呢，，，我們公司啊（忒好啊）是房地產公司，所以我現在寫的是一個關於買房賣房一類的APP，用的這個uni-app ，這種app少不了的就是房產經紀人啊，置業部的店鋪啊，店鋪啊就不用說了，位置被~~~~是吧
看了一下uni-app 的地圖給大家實例一下
<map> 說一說屬性問題
longitude：經度 latitude：緯度 scale：縮放級別，也就是說放大縮下的程度，取值范圍是5-18，默認的是16 ，他就是呢值數越大，放大程度越大，看的越細，看村庄的那種
markers：標記點 就是說你在地圖上標記出來的東西 polyline：路線 可以寫兩個標記點 然后用路線將他們連接起來 circle：圓 就是說在地圖上畫個圈？
controls：控件 他就是說那 在地圖上顯示一個控件，但是這個控件並不隨着地圖移動 include-points：縮放視野以包含所有的坐標點 這就是說你坐標點很多的時候，縮小時可以看到全部
show-location：顯示帶有方向的當前定位點
大概粗略說一下 我用代碼跟大家解釋，這個希望大家先看一遍uni-app的地圖組件，一下很淺顯的我就不跟大家說了
先給大家看個最基本的，根據經緯度 顯示這個地圖
<map style="width:100%;height:85vh;":latitude="latitude":longitude="longitude" ></map>
js部分：
export default { data(){ return{ // 經紀人id agentId:0, title: 'map', //地圖標題 latitude: 40.013305, //緯度 longitude: 118.685713， //經度 //scale：5，//最小數，縮放范圍最大，可見程度最大 //scale：18，//最大數，縮放范圍最小，可見程度最小 } } }
看一下圖是這樣的 這樣顯示的就是經緯度對應的地圖了 這個是默認的縮放16 然后給大家看一下縮放程度的照片 我上邊有些的 綠色的效果 首先展示的是5的 其次是18的
這張是默認的16 
這張縮放程度為5 中國的那種
這張是18 我們庄的那種
下一步： 標記點 markers 顧名思義 就是在地圖上標記了一個類似位置的標記點 用代碼解釋屬性
return{ latitude: 40.013305, longitude: 118.685713, marker: [{ id:0, latitude: 40.013305,//緯度 longitude: 118.685713,//經度 iconPath: '', //顯示的圖標 rotate:0, // 旋轉度數 width:20, //寬 height:20, //高 title:'你在哪了',//標注點名 alpha:0.5 //透明度 label:{//為標記點旁邊增加標簽 //因背景顏色H5不支持 content:'唐山遷安',//文本 color:'red',//文本顏色 // fontSize:24,//文字大小 // x:5,//label的坐標，原點是 marker 對應的經緯度 // y:1,//label的坐標，原點是 marker 對應的經緯度 // borderWidth:12,//邊框寬度 // borderColor:'pink',//邊框顏色 // borderRadius:20,//邊框圓角 // bgColor:'black',//背景色 // padding:5,//文本邊緣留白 // textAlign:'right'//文本對齊方式。 }, callout:{//自定義標記點上方的氣泡窗口 點擊有效 content:'幸福花園店A組',//文本 color:'#ffffff',//文字顏色 fontSize:14,//文本大小 borderRadius:2,//邊框圓角 bgColor:'#00c16f',//背景顏色 display:'ALWAYS',//常顯 }, // anchor:{//經緯度在標注圖標的錨點，默認底邊中點 // x:0, 原點為給出的經緯度 // y:0, // } }], scale:16,//地圖縮放程度 } （我將每一項都給大家標記出來注釋，平台的差異我就不解釋了，大家可以去官網看一下）
先看一張比較普通的，就是只有 標記點的那種 再看一下就是有各種標記的那種
接下來把剩下的都給大家展示一下 路線 圓 還有控件 這幾個是一體的所以一並顯示
這是接着上面data里面寫的 重復太多我就不在寫了 補充了沒有的 controls:[{//在地圖上顯示控件，控件不隨着地圖移動 id:1,//控件id iconPath:'../../static/images/myself.jpg',//顯示的圖標 position:{//控件在地圖的位置 left:15, top:15, width:50, height:50 }, }], circles:[{//在地圖上顯示圓 latitude: 40.013, longitude: 118.685, fillColor:"#999999",//填充顏色 color:"#0016ca",//描邊的顏色 radius:20,//半徑 strokeWidth:2//描邊的寬度 }], polyline:[{//指定一系列坐標點，從數組第一項連線至最后一項 points:[ {latitude: 40.013305,longitude: 118.685713}, {latitude: 40.013,longitude: 118.685}, ], color:"#0000AA",//線的顏色 width:2,//線的寬度 dottedLine:true,//是否虛線 arrowLine:true, //帶箭頭的線 開發者工具暫不支持該屬性 }],
效果圖如下：
后來我引用了一個比較好理解的控件
注意：我們公司設計的當時說想做成那種地圖上面帶有div的 就是說地圖上面可以顯示門店位置。門店名稱的那種，我當時用定位在網頁上實現的，但是一到手機上運行的時候，發現顯示不出來，后來我仔細看了一下，那個map組件享有最高的優先級，
你用定位之類，根本就實現不了，后來我發現了一個叫<cover-image> 和 <cover-view > 他是可以覆蓋在原生組件上的文本視圖 但是也有注意點它不支持的css：
- position: fixed
- opacity
- overflow
- padding
- linebreak
- white-space
另外還有： 在APP端它不支持嵌套其他組件，也不支持本身組件的嵌套，app現在<cover-view>只可以不該原生組件video和map， 一定要注意
目前呢 ~~~~總結這么多，以后要是有什么心得的話我會繼續補充，也歡迎大家幫我補充哈~~~謝謝大家~~~