如何在Cordova应用中调用默认地图应用选取位置并返回坐标

核心实现逻辑 #

通过调用系统地图的URL Scheme（iOS）或Intent（Android）唤起位置选择界面，再通过自定义回调机制将选中的坐标传回Cordova应用。

第一步：安装必备插件 #

需要两个插件分别处理跨平台的唤起与回调：

• cordova-plugin-intent：处理Android的Intent调用及结果返回
• cordova-plugin-customurlscheme：设置iOS的自定义URL Scheme用于接收回调

执行安装命令：

cordova plugin add cordova-plugin-intent
cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycordovamap

注：将mycordovamap替换为你的应用专属Scheme，建议使用应用ID相关字符串

第二步：分平台实现唤起与回调 #

Android平台（Intent方式） #

利用Android的Intent唤起系统地图的位置选择界面，并监听返回结果：

function openMapPickerAndroid() {
    const Intent = cordova.plugins.intent.Intent;
    const Uri = cordova.plugins.intent.Uri;
    
    // 构造唤起地图选点的Intent
    const pickIntent = new Intent(Intent.ACTION_PICK, Uri.parse("geo:0,0?q=选择位置"));
    // 可选：指定谷歌地图，不设置则唤起系统默认地图
    // pickIntent.setPackage("com.google.android.apps.maps");

    // 启动Intent并等待结果
    cordova.plugins.intent.startActivityForResult(
        (result) => {
            if (result.success && result.data) {
                // 解析返回的位置数据
                const selectedLoc = result.data.getParcelableExtra("android.intent.extra.RESULT_DATA");
                const lat = selectedLoc.getLatitude();
                const lng = selectedLoc.getLongitude();
                console.log("选中坐标：", lat, lng);
                // 这里将坐标更新到你的应用UI或业务逻辑中
            }
        },
        (error) => {
            console.error("唤起地图失败：", error);
        },
        pickIntent
    );
}

iOS平台（URL Scheme方式） #

通过苹果地图的URL Scheme唤起选点界面，指定自定义Scheme作为回调地址：

function openMapPickerIOS() {
    const callbackScheme = "mycordovamap://returnLocation";
    // 构造地图唤起URL，指定回调地址
    const mapUrl = `maps://?q=选择位置&callback=${encodeURIComponent(callbackScheme)}`;
    cordova.InAppBrowser.open(mapUrl, "_system");
}

// 监听自定义Scheme的回调（需在deviceready后注册）
document.addEventListener("deviceready", () => {
    window.handleOpenURL = (url) => {
        if (url.startsWith("mycordovamap://returnLocation")) {
            // 解析URL中的坐标参数
            const params = new URLSearchParams(url.split("?")[1]);
            const lat = params.get("lat");
            const lng = params.get("lng");
            console.log("选中坐标：", lat, lng);
            // 处理坐标数据
        }
    };
}, false);

第三步：跨平台统一调用 #

封装函数自动识别当前平台，调用对应实现：

function launchMapPicker() {
    document.addEventListener("deviceready", () => {
        if (cordova.platformId === "android") {
            openMapPickerAndroid();
        } else if (cordova.platformId === "ios") {
            openMapPickerIOS();
        }
    }, false);
}

// 绑定按钮点击事件
document.getElementById("map-pick-btn").addEventListener("click", launchMapPicker);

注意事项 #

• Android：部分第三方地图应用可能不支持ACTION_PICK Intent，建议测试主流地图（谷歌、高德、百度），如需兼容更多应用，需单独适配不同地图的Intent参数。
• iOS：确保config.xml中已正确配置自定义URL Scheme，插件安装后会自动添加，手动修改时检查以下配置：

  <plugin name="cordova-plugin-customurlscheme" spec="~5.0.2">
      <variable name="URL_SCHEME" value="mycordovamap" />
  </plugin>
  

• 权限：无需额外定位权限，但如果应用本身需要定位功能，需在config.xml中添加对应权限配置。

内容的提问来源于stack exchange，提问作者A7S