GitLab

二 继续集成 提前在string.xml中定义好需要的字符串,如下

    <string name="cancel">取消</string>
    <string name="ok">确定</string>
    <string name="tips">提示</string>
    <string name="baidu_map_installed">百度地图</string>
    <string name="tencent_map_installed">腾讯地图</string>
    <string name="ali_map_installed">高德地图</string>
    <string name="no_other_maps">您没有安装第三方地图</string>
    <string name="install_main_maps">请安装高德、腾讯或百度地图</string>
    <string name="chose_map">请选择地图</string>

然后在桥内写好获取已安装app的代码

/**
     * 用于构建弹出式菜单(地图)
     *
     * @return 包含已安装地图的软件名的list
     */
    private List<String> makeMapList() {
        ArrayList<String> maps = new ArrayList<>();
        // 百度地图
        boolean baidu = PackageUtils.isAppInstalled(context, Constant.MapType.BAIDU_MAP);
        // 高德地图
        boolean gaode = PackageUtils.isAppInstalled(context, Constant.MapType.GAODE_MAP);
        // 腾讯
        boolean tencent = PackageUtils.isAppInstalled(context, Constant.MapType.TENCENT_MAP);
        if (baidu) {
            maps.add(context.getString(R.string.baidu_map_installed));
        }
        if (gaode) {
            maps.add(context.getString(R.string.ali_map_installed));
        }
        if (tencent) {
            maps.add(context.getString(R.string.tencent_map_installed));
        }
        return maps;
    }

然后再写好H5需要调用的方法

/**
     * 打开第三方地图
     *
     * @param startLatitude  起点纬度
     * @param startLongitude 起点经度
     * @param from           起点名称(例如 联东U谷)
     * @param endLatitude    终点纬度
     * @param endLongitude   终点经度
     * @param to             终点名称(例如 文鼎雅苑)
     */
    @JavascriptInterface
    public void openMap(double startLatitude, double startLongitude, String from, double endLatitude, double endLongitude, String to) {
        List<String> maps = makeMapList();
        if (maps.size() == 0) {
            MessageDialog.build()
                    .setStyle(IOSStyle.style())
                    .setTheme(DialogX.THEME.DARK)
                    .setTitle(context.getString(R.string.tips))
                    .setMessage(context.getString(R.string.install_main_maps))
                    .setOkButton(context.getString(R.string.ok))
                    .show(context);
        } else {
            BottomMenu.showStringList(maps)
                    .setMessage(context.getString(R.string.chose_map))
                    .setCancelable(true)
                    .setCancelButton(context.getString(R.string.cancel))
                    .setOnMenuItemClickListener((dialog, text, index) -> {
                        if (context.getString(R.string.baidu_map_installed).contentEquals(text)) {
                            MapUtils.openBaiDuMap(context, startLatitude, startLongitude, from, endLatitude, endLongitude, to);
                        } else if (context.getString(R.string.ali_map_installed).contentEquals(text)) {
                            MapUtils.openGaoDeMap(context, startLatitude, startLongitude, from, endLatitude, endLongitude, to);
                        } else if (context.getString(R.string.tencent_map_installed).contentEquals(text)) {
                            MapUtils.openTencentMap(context, startLatitude, startLongitude, from, endLatitude, endLongitude, to);
                        }
                        return false;
                    });
        }
    }

vue测试代码

<template>
  <div class="main">
    <div class="center">
      <el-form :model="form" label-width="100px">
        <el-form-item label="起点纬度">
          <el-input type="number" v-model.number="form.startLatitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="起点经度">
          <el-input type="number" v-model.number="form.startLongitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="起点地点">
          <el-input type="text" v-model="form.from" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="终点纬度">
          <el-input type="number" v-model.number="form.endLatitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="终点经度">
          <el-input type="number" v-model.number="form.endLongitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="终点地点">
          <el-input type="text" v-model="form.to" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)" class="btn">导航</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        startLatitude: 31.910881,// 起点纬度
        startLongitude: 118.924927,// 起点经度
        from: '',// 起点地点
        endLatitude: 32.102951,// 终点纬度
        endLongitude: 118.809219,// 终点经度
        to: '',// 终点地点
      },
    };
  },
  methods: {
    submitForm(form) {
      console.log(form)
      if (window.android) {
        window.android.openMap(form.startLatitude, form.startLongitude, form.from, form.endLatitude, form.endLongitude, form.to);
      }
    },
  }
}
</script>

<style>
.main {
  width: 100%;
  height: 100%;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 46pt;
}

.btn {
  width: 100%;
}
</style>