如何在圖片上層放一個小圖標？

1. 圖片上面放一個小圖標，這在iOS中最簡單的樣式，CSS中卻費了我一番功夫。
   要實現的效果如下：

   
   
   收藏頁面

2. 還是繼續使用上次的模板，在大圖片上添加一個小圖標。上次模板的樣式代碼在這里《小程序學習筆記3-模板template、列表和頁面傳值》。現在要在這個模板的基礎上添加一顆紅色的小心心，正好之前用sketch畫過，就導出了我自己畫的??，放到項目路徑下。

3. 在.wxml中添加代碼

  <view class='houseItem-img'>
      <!-- 大圖片 -->
      <image class='image-house' src='{{image}}' mode="aspectFill"></image>
      <!-- 小圖標 -->
      <image class='image-collect' src='../../../images/mine/mine_heart.png' ></image>
  </view>

4. 修改樣式

.houseItem-img {
  width: 100%;
  position: relative;
}
.houseItem-img .image-house {
  width: 100%;
  display: block;
}
.houseItem-img .image-collect {
  position: absolute;
  right:10px;
  top:10px;
  width: 24px;
  height: 22px;
}

5. 這樣就實現上面的效果了。在放圖標的過程中還是因為CSS不熟走了很多彎路，最后用百度來的方法做到了。
   方法介紹如下：

這種效果單純的圖片不好實現，假設把它們放進一個div的容器里面。
<div>
<img src="1.jpg">
<img class="pos" src="2.jpg">
<div>
CSS代碼為：
div{ position: relative; width: 200px; height: 200px; }
img{ display: block; }
.pos{ position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
原理是用到了父元素相對定位時，子元素絕對定位是相對于父元素來定位，設置top和left均為50%，然后偏移寬和高的一半，就可以實現垂直居中的效果。不只對于圖片，對于任何元素都能實現此效果。
給img添加display: block;是防止在IE6下圖片下方出現空白的BUG。

weui +css調整樣式

要實現的效果如下圖：

1. 先分解頁面，分為"小區"、“地圖”、“路線”三部分，“小區”和地圖部分使用weui的list列表樣式weui-cell。地圖部分使用小程序官方提供的<map>組件。
2. copy代碼后修改一下字體顏色和大小。
   .wxml中代碼如下：

<view class='page-section house-location' style='padding: 0;'>
      <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class='weui-cell__bd'>
          <text class="line-title">小區：</text>
          <text class="line-content">魏公村小區</text>
        </view>
        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </navigator>
      <map class='house-map' >
      </map>
      <navigator url="" class="weui-cell weui-cell_access loacation" hover-class="weui-cell_active" >
        <view class="weui-cell__hd">
          <image src="../../../images/home/house_station.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
          </view>
        <view class="weui-cell__bd">4號線 魏公村站 東北口</view>
        <view class="weui-cell__ft" style='color:#bebebe;font-size:12px;'>步行489米</view>
      </navigator>
    </view>

.wxss中調整樣式：

.line-title {
  color: #bebebe;
}
.line-content {
  color: #5c5c5c
}
map {
  width: 100%;
  height: 300rpx;
}

3. 寫好后編譯一下，效果如圖：

   
   
   線.png

這時會發現，地圖下方有一條線，這是weui中weui-cell樣式設置的，但是這里我們不需要這條線，所以要想辦法去掉。
首先我想到的是直接將border-top去掉，如下修改代碼，發現完全沒有效果

然后我又仔細找這條線的來源，原來在這里：

頁面調試

:before對我這個小學生可能有點超綱，然后就學習一下，這是W3School中的介紹-CSS選擇器。看完之后明白了，原來是這樣。

| :before | p:before | 在每個 <p> 元素的內容之前插入內容。 |

怪不得我之前寫的樣式不好使，原來它是在元素之前插入的啊，這樣就好辦了，在.wxss中添加個樣式:

.house-location>.weui-cell:before {
  border-top:none; 
}  

順便學習一下>，也是在CSS選擇器學到的。

| element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素。 |

4. 再編譯一下，線已經去掉了
   image.png

PS：使用<map>組件后，頁面調試就出問題，不知道是微信開發工具的問題還是我寫的問題，所以上面調試的時候我先將<map>注釋掉了。

這是使用<map>的調試頁面，根本不能調試了~

地圖map

上面例子中地圖只是簡單的展示了一下，沒有顯示正確的位置，沒有定位小圖標，微信官方文檔地圖非常清楚，根據官方文檔修改一下代碼，在地圖上添加定位小圖標
代碼修改如下：

<map id="map" longitude="116.320661" latitude="39.956692" scale="16"  markers="{{markers}}" bindmarkertap="markertap" ></map> 

.js data中添加代碼：

data: {
    markers: [{
      iconPath: "/images/home/mapLocation.png",
      id: 0,
      latitude: 39.956692,
      longitude: 116.320661,
      width: 16,
      height: 22
    }],
  },

編譯效果：

PS: map組件使用的經緯度是火星坐標系,我找了個在線轉換工具，可以將百度坐標系轉換成火星坐標系。真正開發的時候應該是用不到的。