微信小程序入门案例-会议邀请函

涉及内容：地图

目录结构：

pages\index\index.wxml

<view class="box">
  <view class="title">
    会议主题
  </view>
  <image src="/images/1.jpg" style="width:100%" mode="widthFix"></image>
  <view class="content">
    <text>
      这是一封正经的邀请函，邀请正经的人进来参加的正经会议。\n各位正经人士想必都对这个正经会议产生了浓厚的正经兴趣。\n快来加入正经的我们吧！！！\n承办方：正经委员会\n协办方：正经人类研究会

    </text>
  </view>
</view>
  <view class="box">
    <view class="title">活动背景</view>
    <view class="content">
      <text>现如今，正经人越来越少了。\n我们仅存的正经人面临巨大的正经使命。\n各位正经人士，崛起吧。\n扛起正经的大旗\n进发</text>
    </view>
  </view>

  <view class="box">
    <view class="title">分享嘉宾</view>
    <view class="content">
      <view class="bar" wx:for='{{guest}}' wx:key='guest{{index}}'> 
        <image class="avatar" src="{{item.avatar}}"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
  </view>

  <view class="box">
    <view class="title">会议地点</view>
    <view class="content">
      <text>2020年2月2日-4040年4月4日|正经人类研究中心</text>
      <map latitude="{{lat}}" longitude="{{lon}}"></map>
      <button bindtap="showGuide">查看详情</button>
    </view>
  </view>

pages\index\index.wxss

.box{
  border: 2rpx solid #00B26A;
  color: #00B26A;
  margin: 15rpx;
  padding: 15rpx;
}
.title{
  font-size: 18pt;
  font-weight: bold;
  padding-bottom: 10rpx;
  border-bottom: 2rpx dashed #00B26A;
}
.content{
  font-size: 12pt;
  margin: 10rpx 0;
  line-height: 80rpx;
}
.bar{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16pt;
}
.avatar{
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}
map{
  width: 100%;
  height: 400rpx;
}
button{
  color: white;
  background-color: #00B26A;
}

pages\index\index.json

{
  "usingComponents": {}
}

pages\index\index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    guest:[{
      avatar:'/images/2.jpg',
      name:'正经人1号'
    },{
      avatar:'/images/3.jpg',
      name:'正经人2号'
    }],
    lat:39.90467,
    lon:116.39403,
  },

  /**
   * 生命周期函数--监听页面加载
   */
 >//app.js
App({
  src="https://img-blog.csdnimg.cn/20201013094515663.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI=,size_16,color_FFFFFF,t_70" />