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

好久没有写过关于微信小程序的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）