如何在图片上层放一个小图标？

图片上面放一个小图标，这在iOS中最简单的样式，CSS中却费了我一番功夫。
要实现的效果如下：

收藏页面
还是继续使用上次的模板，在大图片上添加一个小图标。上次模板的样式代码在这里《小程序学习笔记3-模板template、列表和页面传值》。现在要在这个模板的基础上添加一颗红色的小心心，正好之前用sketch画过，就导出了我自己画的❤️，放到项目路径下。
在.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>

修改样式

.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;
}

这样就实现上面的效果了。在放图标的过程中还是因为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调整样式

要实现的效果如下图：

先分解页面，分为"小区"、“地图”、“路线”三部分，“小区”和地图部分使用weui的list列表样式weui-cell。地图部分使用小程序官方提供的<map>组件。
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;
}

写好后编译一下，效果如图：

线.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> 元素。 |

再编译一下，线已经去掉了

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组件使用的经纬度是火星坐标系,我找了个在线转换工具，可以将百度坐标系转换成火星坐标系。真正开发的时候应该是用不到的。

小程序学习笔记4-weui实战、WXSS样式和地图map

小程序学习笔记4-weui实战、WXSS样式和地图map

如何在图片上层放一个小图标？

weui +css调整样式

地图map