微信小程序基础之媒体（图片，音频，视频）和地图的使用

好久没有写过关于微信小程序的Demo了，今天向大家展示的关于媒体（图片，音频，视频）和地图的使用方法，希望对大家有所帮助，不喜勿喷，谢谢~代码中都有必要的文字注释，部分代码如下：

图片：

<!--pages/index/Component/Image/Image.wxml-->
 <view class="viewTitle">
     <text class="view-Name">Image图片</text>
     <view class="lineView"></view>
 </view>
 <!--这里要注意,加载本地图片地址不要写错，“../”：表示当前文件所在的位置，
 然后添加图片所在的文件或文件夹地址-->
 <view class="section section_gap">
     <view class="section__title">本地图片</view>
     <view class="section__ctn">
         <image class="image" src="../Resource(资源)/1.jpg" />
     </view>
 </view>
 <!--如果加载网络图片，直接网络地址就可以-->
 <view class="section section_gap">
     <view class="section__title">网络图片</view>
     <view class="section__ctn">
         <image class="image" src="https://image.healthmanage.cn/qImage/201608171634363931139.jpg" />
     </view>
 </view>

音频：

<!--pages/index/Component/Audio/Audio.wxml-->
 <view class="viewTitle">
     <text class="view-Name">Audio音频</text>
     <view class="lineView"></view>
 </view>
 <!--设计音频展示样式-->
 <view class="section section_gap" style="text-align: center;">
       <audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" controls></audio>
 </view>

视频：

<!--pages/index/Component/Video/Video.wxml-->
 <view class="viewTitle">
     <text class="view-Name">Video视频</text>
     <view class="lineView"></view>
 </view>
 <!--src="{{src}}":视频地址参数,前面是参数名名，后面是参数具体值-->
 <view class="section section_gap">
     <view class="body-view" style="text-align: center;">
         <video src="{{src}}"></video>
     </view>
 </view>

地图：

<!--pages/index/Component/Map/Map.wxml-->
 <view class="viewTitle">
     <text class="view-Name">Map地图</text>
     <view class="lineView"></view>
 </view>
 <!--latitude:维度,longitude:经度-->
 <view class="section section_gap">
       <map
         style="width: 100%; height: 500px;"
         latitude="{{latitude}}"
         longitude="{{longitude}}"
         markers="{{markers}}"
         covers="{{covers}}"
         >
       </map>
 </view>

效果图：​​（源码下载：https://github.com/hbblzjy/WX-Demo6）​​