Html 移动 html5 启动手机的原生导航应用

mobile html5 launch phone's native navigation app

提问by David

I'm developing a phonegap/cordova app. Is there a way to open a phone's native navigation app within the browser view? Or is there a best practice on opening native map applications from html5 apps? Or are they all platform specific?

我正在开发一个 phonegap/cordova 应用程序。有没有办法在浏览器视图中打开手机的原生导航应用程序？或者是否有从 html5 应用程序打开本机地图应用程序的最佳实践？或者它们都是特定于平台的？

I've read some places that the following works for certain versions of Android

我读过一些地方，以下内容适用于某些版本的 Android

<a href="geo:some address here" />Navigate to here</a>

and that this works for iOS

这适用于iOS

<a href="http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>

I'm amazed that Phonegap hasn't implemented something like this.

我很惊讶 Phonegap 没有实现这样的东西。

采纳答案by DaveAlden

You can open the native navigation app on iOS 5 (Google Maps) and iOS 6 (Apple Maps) by using the magic "maps:" protocol, e.g. window.location = "maps:daddr=50.4,-4.5"

您可以使用神奇的“地图：”协议在 iOS 5（谷歌地图）和 iOS 6（苹果地图）上打开本机导航应用程序，例如 window.location = "maps:daddr=50.4,-4.5"

But to launch the native Google Navigator app on Android you need to use a phonegap plugin. I wrote this one for my own purposes.

但是要在 Android 上启动本机 Google Navigator 应用程序，您需要使用 phonegap 插件。我写这个是为了我自己的目的。

UpdateThe plugin has now been updated for Phonegap 3.x and supports Android, iOS and Windows Phone, including an option to prefer Google Maps on iOS.

更新该插件现已针对 Phonegap 3.x 进行了更新，并支持 Android、iOS 和 Windows Phone，包括在 iOS 上更喜欢 Google 地图的选项。

The plugin is here: https://github.com/dpa99c/phonegap-launch-navigator

插件在这里：https: //github.com/dpa99c/phonegap-launch-navigator

回答by viktor0710

The plugin is great! Thanks for sharing! I tried it in my app but unfortunately I have Phonegap version 3.x and your plugin is only working for Phonegap 2.x :(

插件很棒！感谢分享！我在我的应用程序中尝试过，但不幸的是我有 Phonegap 3.x 版，而您的插件仅适用于 Phonegap 2.x :(

So in order to get it working on Phonegap 3.x I got the plugin from your github repo and made some changes so that it works for 3.x

所以为了让它在 Phonegap 3.x 上工作，我从你的 github repo 中获得了插件并做了一些更改，以便它适用于 3.x

The modified PhoneNavigator Plugin for Phonegap 3.x can be downloaded from my github repo: https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git

修改后的 PhoneNavigator Plugin for Phonegap 3.x 可以从我的 github repo 下载：https: //github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git

How to integrate it in your Phonegap 3.x project:

如何将它集成到你的 Phonegap 3.x 项目中：

1. Open a console window
2. Go to your Phonegap app root
3. Then execute: phonegap local plugin add https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
4. Copy "phonenavigator.js" from the repo (www/phonenavigator.js) in your app (ex: yourapp/www)
5. include "phonenavigator.js" in you app:
6. Copy "cordova.js" from the repo (www/cordova.js) in your app (ex: yourapp/www)
7. include "cordova.js" in you app:

1. 打开控制台窗口
2. 转到您的 Phonegap 应用程序根目录
3. 然后执行：phonegap local plugin add https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
4. 从应用程序中的 repo (www/phonenavigator.js) 复制“phonenavigator.js”（例如：yourapp/www）
5. 在您的应用程序中包含“phonenavigator.js”：
6. 从应用程序中的 repo (www/cordova.js) 复制“cordova.js”（例如：yourapp/www）
7. 在您的应用程序中包含“cordova.js”：

How to use it:

如何使用它：

//function declaration
function navigateTo (lat, lon, successFn, errorFn) {
    cordova.require('cordova/plugin/phonenavigator').doNavigate(lat, lon, successFn, errorFn);
}

//set lat and lon variables. Most probably read them from the UI
var latitude =  48.137607;
var longitude = 11.568569;

//call function
navigateTo(
    latitude,
    longitude,
    function(){
        console.log("Successfully opened navigator");
    },
    function(){
        console.log("Error opening navigator");
    }
);

回答by AmpT

As mentioned above, the following works on Galaxy S4 Android (just tested it), to bring up the Google Maps/Navigation app and waze:

如上所述，以下适用于 Galaxy S4 Android（刚刚测试过），以启动 Google 地图/导航应用程序和 waze：

<a href="geo:37.786971,-122.399677;u=35">Wikimedia Headquarters</a>

Credit: http://en.wikipedia.org/wiki/Geo_URI#Example

信用：http: //en.wikipedia.org/wiki/Geo_URI#Example

Please also see the answer here: https://stackoverflow.com/a/19765368/2728686

另请参阅此处的答案：https: //stackoverflow.com/a/19765368/2728686

回答by Jeremy Belolo

For the record, if someone find this thread by looking on Google like I did, it worked for me directly, working with Ionic framework, by doing two things :

作为记录，如果有人像我一样通过在 Google 上查找找到这个线程，它直接对我有用，使用 Ionic 框架，通过做两件事：

• In the myapp.config(...) of your app add

  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|geo):/);
  

  (dont forget to add $compileProvider as a dependency)

• In the config.xml, add the line

  <access origin="geo:*" launch-external="yes"/>
  

• 在应用程序的 myapp.config(...) 中添加

  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|geo):/);
  

  （不要忘记添加 $compileProvider 作为依赖项）

• 在 config.xml 中，添加行

  <access origin="geo:*" launch-external="yes"/>
  

That's all.

就这样。

回答by delkant

Cordova 3.6.0 introduces a second whitelist, for restricting which URLs are allowed to launch external applications. In previous versions of Cordova, all non-http URLs, such as mailto:, geo:, sms: and intent, were implicitly allowed to be the target of an a tag. Because of the potential for an application to leak information, if an XSS vulnerability allows an attacker to construct arbitrary links, these URLs must be whitelisted as well, starting in Cordova 3.6.0.

Cordova 3.6.0 引入了第二个白名单，用于限制允许哪些 URL 启动外部应用程序。在 Cordova 的早期版本中，所有非 http URL，例如 mailto:、geo:、sms: 和 Intent，都被隐式允许作为 a 标记的目标。由于应用程序可能会泄露信息，如果 XSS 漏洞允许攻击者构建任意链接，那么这些 URL 也必须从 Cordova 3.6.0 开始列入白名单。

Cordova 3.6.0 Whitelist Guide

Cordova 3.6.0 白名单指南

So you need to add explicitly in the config.xml:

所以你需要在 config.xml 中明确添加：

  <access origin="tel:*" launch-external="yes" />
  <access origin="mailto:*" launch-external="yes" />