场景介绍

    景区导览能力主要为用户提供景区内地图及经典游园路线等服务，当用户在景区打开地图，除了可以为用户提供即时定位、方向、路径规划等基础服务外，用户还可以结合语音服务，选择自己想要的游园路线，相比购买传统导游服务方便快捷。

    园内导览方案主要是为指导景区及其系统开发方快速完成景区内路线规划、方向指引、语音导览等功能开发。支付宝端主要提供用户定位、方向指引、路径规划、语音播放等能力，开发者在小程序提供的基础api和组件基础上做功能开发。

使用流程

具体使用流程如下：

1、游客在景区内可通过手机钱包搜索对应小程序名称或通过扫描园内铺设的小程序二维码进入景区小程序 。

2、用户点击小程序菜单“园内导览”展示景区园内地图主页。

3、点击“路线”按钮，底部弹出浮层展示景区内可供选择的推荐路线，向上滑动可全屏展示。

4、选择其中某条路线地图上展示对应的路径规划连接线。

5、部分景点支持语音讲解，可在对应的POI点上添加语音标识，被点击时底部浮层展示语音播放浮层，可对语音进行播放、暂停和关闭。

开发前准备工作

上述能力包含在小程序的API中。如需开发需要首先成为开放平台开发者，并创建小程序应用，为小程序添加“jsAPI基础包”、“小程序支付”等需要的基础功能包。

1、入驻开放平台成为开发者，请根据开发者入驻指引流程操作。

2、创建小程序应用，基本信息填写参照各项文本框下方的要求即可。

3. 配置应用环境，包括应用功能，RSA2的公钥、应用网关等，进入”小程序应用--设置--开发设置“中配置，点击进入配置。

• 如果调用接口使用商户的账号，那么商户同样需要入驻支付宝的开放平台、创建应用，成为“自研开发者”。
• 如果ISV采用“第三方应用授权”的方式调用接口，那么可以以三方模板或者插件的形式开发。详见第三方模式开发文档。

方案详解

*由于导览模块开发中用到的部分地图能力为定向开放能力，在开放平台上并未给出文档，需要地图相关文档请在此下载。

下面对导览组件开发过程中重点功能的实现方案进行介绍。

1、同层渲染能力开启

同层渲染能力现在处于定向开放阶段，对支付宝钱包版本也有一定限制，版本支持范围和开启方式如下：

• 支持范围
  • 10.1.50及以上ios钱包；10.1.35及以上Android钱包
• 开启方式
  • 小程序配置文件中增加配置项 enableInPageRender:"YES"，缺少此配置项地图层上的浮层将无法展示。

{
    "pages": [
          "pages/todos/todos",    
          "pages/add-todo/add-todo"
    ],
    "window": {
          "defaultTitle": "Todo App",
          "enableInPageRender": "YES"
    }
}

2、手绘地图贴图方法

如果ISV有能力绘制景区园内手绘地图，可以采用map的贴图属性将手绘地图覆盖在底层地图上，这样游客看到的将是更精细化的手绘地图，体验更好。贴图能力的实现是通过支付宝钱包35版本map新增的ground-overlays属性实现，代码样例如下。

    
groundOverlays: [{
      'include-points': [{// 右上
        latitude: 30.280631,
        longitude: 120.14087,
      }, {// 左下
          longitude: 120.114906,
          latitude: 30.268549,
      }],
      image: '/images/bnaner-bg.png',
      alpha: 0.75,
      zIndex: 0,
    }]

3、图层上下层控制

开启同层渲染功能后可以支持在地图上层添加图层，同时配合position属性实现浮层定位，通过z-index属性值控制，默认基础层z-index=0，如果要在地图上层展示可以给响应组件设置样式z-index>0即可。参考样例：

.am-list-box{
  position: fixed;
  bottom:0;
  left: 0;
  height: 600rpx;
  width: 100%;
  z-index: 150;
  background-color:#ffffff; 
}

4、语音播放实现

由于语音组件存在安全风险默认不对外开放，如需使用需要联系业务方申请，通过审核即可使用。

语音播放通过audio音频组件实现，组件属性和方法目前暂无对外文档可参考，如需使用请参考组件内部语音播放的样例。

组件下载

为了帮助减少不必要的问题咨询，开发者缩短开发周期，加速项目快速高质量落地，我们针对上述基础能力做了组件封装。为了快速完成导览功能模块开发，开发者可下载“景区导览组件”开发工程包，在此基础上根据业务需求做简单修改即可完成前端开发工作。

组件使用方法：下载后解压，通过“蚂蚁开发者工具IDE--打开“功能选择解压后的文件夹，打开记载完成后即可看到组件源代码。

组件结构简介：主页面是index页面，其中会引用component目录下的组件mapdemo，mapdemo引用card和steps组件，自定义组件定义和引用方法详见文档。

点此下载

售后保障

上线后出现技术问题，请走售后保障流程：

a. 在线IM（保证处理时效，工作日9:00-18:00）：https://cschannel.alipay.com/newPortal.htm?scene=mt_zczx打开链接输入pid，系统识别大商户，自动分配值班技术同学支持。

b. 技术邮箱（保证处理时效，工作日9:00-18:00，解决上线后疑难杂症）：techservices@alipay.com。

c. 宕机等故障反馈值班手机：183-6885-2842 （工作日18:00-次日9:00，节假日全天）。

FAQ