借助小程序·云开发制作校园导览小程序丨实战

├─ src
├─── config
├───── index.ts // 入口
├───── cloud.ts // 云开发相关配置
├───── info.ts // 应用介绍信息
├───── markerStyle.ts // 地图marker样式
├───── panorama.ts // 第三方全景地图配置（个人类型无webview权限，默认关闭）
└───── secret.ts // 腾讯地图key等敏感信息（可选）

// markers表 数据格式
{
  _id: "5ce8fe1c29c7a8581bc1e989",  // id，云数据库录入upsert更新用
  type: "生活服务",   // 场景名称
  icon: "shfw",     // marker默认图标，为场景名称拼音缩写
  scale: 15.0,   // 场景在地图上的缩放值，可选。已废弃，用includePoints代替
  position: 0, // 指定在各个场景中的排列顺序
  data: [   // 该场景下的地点markers
    {
      name: "孙中山铜像",   // 地点名称
      short_name: "铜像", // 名称缩写
      desc: "中山铜像...", // 描述信息
      logo: "tx",   // 地点logo，缩写拼音, 如作各院系logo展示
      icon: "tx@2",   // 自定义marker图标，“@”后数字为图标相较于默认图标的缩放值
      images: 3,  // 图片数量，作云存储拼接路径用（cloud://cloudRoot/1教/n.jpg）
      panorama: 0,  // 全景场景id
      latitude: "23.635875",  // 经度
      longitude: "113.678965",  // 纬度
      contact: { phone: "020-123456", address: "出门左转" }   // 联系方式
    }
  ]
}

// index
async loadMarkers() {
  let markers;
  if (app.globalData.config.debug) {
    // 本地
    markers = mockMarkers;
  } else {
    // 云
    await wx.cloud
      .callFunction({
        name: "loadMarkers"
      })
      .then((res: any) => {
        markers = res.result.data;
      });
  }
  app.globalData.markers = markers;
}

clearMarkers(markers: any[]) {
  let num = 0;  // 每个marker都要有一个id
  for (const i of markers) {
    for (const j of i.data) {
      j.id = num;
      num += 1;
      j.iconPath = `/assets/images/markers/${j.icon ? j.icon : i.icon}.png`;

      ...

      // 自定义气泡样式
      j.callout = Object.assign(
        { content: j.short_name ? j.short_name : j.name },
        app.globalData.config.markerStyle.calloutStyle
      );
    }
  }
  return markers;
}

// index
onReady() {
  this.setData!({
    mapContext: wx.createMapContext("map")
  });
}

includePoints(padding: number) {
  this.data.mapContext.includePoints({
    padding: [padding, padding, padding, padding],
    points: this.data.markers
  });
}

locate() {
  this.data.mapContext.moveToLocation();
}

<!-- 地点详情页 轮播图 -->
<swiper
  indicator-dots="{{imgUrls.length > 1}}"
  autoplay="{{true}}"
  interval="3000"
  duration="1000"
>
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image
        src="{{item}}"
        class="slide"
        data-id="{{index}}"
        bindtap="previewImage"
      />
    </swiper-item>
  </block>
</swiper>

for (let i = 0; i < marker.images; i++) {
  imgUrls.push(
    this.data.cloudRoot +
      "images/" +
      (marker.short_name || marker.name) +
      "/" +
      i +
      ".jpg"
  );
}

  "navigationStyle": "custom"

bounding: wx.getMenuButtonBoundingClientRect();

<!-- SIDE MENU -->
<view
  class="sidebar"
  hidden="{{toggleRoutes}}"
  style="top:{{bounding.height + bounding.top + 10}}px"
>
  ...
</view>

windowWidth: wx.getSystemInfoSync().screenWidth;

<scroll-view class="route" scroll-x scroll-into-view="{{focusPointId}}">
  <view
    class="points"
    style="width:{{routes[routeIndex].count * 140 < windowWidth ? windowWidth : routes[routeIndex].count * 140}}rpx;"
  >
    ...
  </view>
</scroll-view>