反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

[App]JS 调用百度/高德地图

  • 文档创建者:码农阿伟
  • 历史版本:12
  • 最近更新:April陶 于 2021-09-22
  • 1. 概述

    1.1 应用场景

    移动端预览报表时,可以调用百度地图和高德地图的导航功能。效果如下图所示:

    1588907557612082.gif

    1.2 实现思路

    通过JavaScript脚本类型的超级链接,实现调用功能。

    注 1:需要提前安装好百度地图和高德地图的 App 。

    注 2:不支持 H5 端和 PC 端预览。

    注 3:jar 包是2021.08.26 版本的设计器,ios 版本地图无法调用。

    2. 示例

    2.1 数据准备

    新建内置数据集 Embedded1,如下图所示:

    image.png

    2.2 表格设计

    如下图设计表格:

    image.png

    2.3 添加超级链接

    2.3.1 百度地图

    1)选中 G2 单元格,添加一个JavaScript脚本类型的超级链接 address,添加参数address,其值为 D2 单元格,也就是目的地,如下图所示:

    Snag_28b5e242.png

    JS 代码如下:

    var deviceInfo = FR.Mobile.getDeviceInfo();
    var str = deviceInfo.Model;
    //判断手机系统
    if (str.indexOf("iPhone")!= -1 || str.indexOf("iPad")!= -1 || str.indexOf("Phone") != -1) {
        alert(str.indexOf("iPhone"));
        src = "ios.baidu.openAPIdemo";
    } else {
        src = "andr.baidu.openAPIdemo";
    }
    FR.doHyperlinkByGet({
        url: "bdapp://map/geocoder?src=" + src + "&address=" + address,
        title: '百度'
    })

    2)选中 G2 单元格,添加一个JavaScript脚本类型的超级链接 location,添加 3 个参数,如下图所示:

    Snag_28bb5d94.png

    JS 代码如下:

    var deviceInfo = FR.Mobile.getDeviceInfo();	
    var str = deviceInfo.Model;
    if (str.indexOf("iPhone") || str.indexOf("iPad") || str.indexOf("Phone") != -1) {
        src = "baidumap://map/geocoder?coord_type=gcj02&src=ios.baidu.openAPIdemo";
    } else {
        src = "bdapp://map/marker?&title=" + title + "&traffic=on&src=andr.baidu.openAPIdemo";
    }
    FR.doHyperlinkByGet({
        //lat<纬度>,lng<经度>
        url: src + "&location=" + lat + "," + lng,
        title: '百度'
    })

    2.3.2 高德地图

    1)选中 G3 单元格,添加一个JavaScript脚本类型的超级链接 address,添加参数keyword,其值为 D2 单元格,也就是目的地,如下图所示:

    Snag_28bf3066.png

    JS 代码如下:

    var deviceInfo = FR.Mobile.getDeviceInfo();
    var str = deviceInfo.Model;
    if (str.indexOf("iPhone")!= -1 || str.indexOf("iPad")!= -1 || str.indexOf("Phone") != -1) {
        src = "iosamap://keywordNavi?sourceApplication=softname&style=2";} 
    else {
        src = "androidamap://keywordNavi?sourceApplication=softname&style=2";
    }
    FR.doHyperlinkByGet({ url: src + "&keyword=" + keyword,title: '高德'})

    2)选中 G3 单元格,添加一个JavaScript脚本类型的超级链接 localhost,添加 3 个参数,如下图所示:

    Snag_28c2fcdf.png

    2.4 效果预览

    使用移动端 App数据分析V10预览该报表,效果如 1.1 应用场景 中所示。

    注:不支持 H5 端和 PC 端预览。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\调取百度和高德导航.cpt

    点击下载模板:调取百度和高德导航.cpt

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526