快應用地圖組件、富文本及路由傳參

快應用有用到官方提供的map地圖組件(百度地圖)，遇到點小問題，這裏記錄下，以及快應用官方提供的rich-text富文本、路由傳參

1.效果圖

2.map

2.1屬性

• latitude 中心緯度,默認爲當前位置，不然爲北京
• longitude 中心經度,默認爲當前位置，不然爲北京
• scale 地圖縮放級別，4-20，微信中的是默認16
• markers 用來標記地圖上的點
• showmylocation 顯示帶有方向的當前定位點
• 我這裏想顯示的是markers，並使用label屬性

2.2markers

• latitude: 0, // 標記點緯度，必填
• longitude: 0, // 標記點經度，必填
• iconPath: '', // 標記點的那個圖標，我這裏就是那個定位圖標
• width: 16,
• height: 24,
• opacity: 0.7, // 標記透明度，0-1，與微信不一樣，微信的是alpha屬性，也是透明度
• label: {}, // 標記點的相關信息

label:{
    content:  '當前位置',  // 顯示的內容
    color:  '#767676',
    fontSize:  '10px',
    borderRadius:  '6px',
    padding:  '10px',
    textAlign:  'center',
    display:  'always',
    backgroundColor:  '#ffffff',
    anchorX:  -200,
    anchorY:  -140
}

• 能夠使用label中的anchorX和anchorY來調整標記的位置

3.操做

• 你要是直接寫死數據，不使用後臺的數據，是能夠直接渲染出來這個標記的，可是，你要是使用後臺的數據，就不能直接在你請求回後臺數據的那個方法裏對label賦值
• 地圖組件

<map
    class="shopMap"
    latitude="{{shopInfo.lat?Number(shopInfo.lat):0}}"
    longitude="{{shopInfo.lng?Number(shopInfo.lng):0}}"
    markers="{{mapMarkers}}"
    scale="16"
    @loaded="handleMapLoaded"
></map>

• 在地圖的loaded方法裏對label賦值

/* 地圖加載完成 */
handleMapLoaded() {
    let  item  =  Object.assign({}, this.mapMarkers[0]);
    item.latitude  =  this.shopInfo.lat?Number(this.shopInfo.lat):0;
    item.longitude  =  this.shopInfo.lng?Number(this.shopInfo.lng):0;
    item.label.content  =  this.shopInfo.address;
    this.mapMarkers  = [item];
},

4.路由傳參

• 能夠直接在uri中加入參數

router.push({
    uri:  '/pages/index?id='  +  goodsid,
});

• 若是你傳遞的參數是圖片連接，這樣就不能跳轉，他會將參數中的連接當作頁面地址或外鏈地址，這時就得用params來傳遞

router.push({
    uri:  '/pages/AddForm',
    params: {
        storeID:  this.shopId,
        banner:  encodeURI(this.banner),
    }
})

• 接收參數依然同樣，使用this.參數，如this.banner

5.富文本

• 快應用中的富文本使用rich-text，他對圖片沒有作處理，若是圖片太大，他就會使富文本出現滾動，能夠用正則修改圖片的樣式進行調整

this.richText = text.replace(/<img/gi, '<img style="max-width: 100%;height: auto"');

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形
  • 微信小程序使用車牌號輸入法