uniapp 手机地图

### 实现 UniApp 中的地图功能 #### 配置 `manifest.json` 为了在 UniApp 应用中使用地图服务，需先在项目的 `manifest.json` 文件内完成相应的 API Key 设置。对于腾讯地图而言，在 web 环境下的配置项里填入获取到的 key 即可[^1]。 ```json { "plus": { ... "distribute": { "web": { "mapKey": "您的腾讯地图API Key" } }, ... } } ``` #### 调起手机自带地图应用或网页版导航 针对不同平台（iOS/Android），可以利用 uni-app 提供的能力来检测并启动本地安装的地图应用程序；如果这些 app 不可用，则提供链接至相应在线版本的服务地址以继续操作[^2]。 具体实现方式如下： 定义一个名为 `guide` 的函数用于处理用户的交互逻辑，此函数接收参数决定目标位置以及所选服务商名称作为输入条件之一。内部依据当前运行环境检查是否存在指定的应用程序，并据此采取行动。 ```javascript export default { methods: { guide(location, mapProvider) { let url; switch (mapProvider.toLowerCase()) { case 'baidu': if (/android/i.test(navigator.userAgent)) { try { plus.runtime.openURL(`baidumap://map/direction?destination=${location}`); return; } catch(e){} } else { // iOS or other platforms fallback to web version url = `https://map.baidu.com/mobile/webapp/newroute/route/?s=con driving|${location}`; } break; case 'amap': if(/android/i.test(navigator.userAgent)){ try { plus.runtime.openURI('amapsuri://route/plan/?sid=&tid=&tlat=&tlon=&did=BGVIS1&dlat='+ location.lat +'&dlon=' + location.lng); return; }catch(e){} }else{//ios url=`https://m.amap.com/navi/index/?dest=${location}&destName=目的地`; } break; default: console.error("Unsupported map provider"); return; } window.location.href=url; // Fallback action when native apps are not available. } } }; ``` 上述代码片段展示了如何根据不同情况构建 URL 并尝试打开它。当遇到 Android 设备上的特定异常时会捕获错误从而不影响后续流程执行。而对于非原生支持的情况则转向访问对应的网站页面来进行路径规划。