Мобильное приложение для навигации html5 для мобильных телефонов

Я разрабатываю приложение phonegap/cordova. Есть ли способ открыть собственное навигационное приложение телефона в окне браузера? Или есть лучшая практика по открытию приложений на основе карт из приложений html5? Или все они специфичны для платформы?

Я прочитал несколько мест, которые следуют за некоторыми версиями Android

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

и что это работает для iOS

<a href="#" onclick="location.href='http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino'; return false;">Directions</a>

Я поражен тем, что Phonegap не реализовал что-то вроде этого.

Ответы

Ответ 1

Вы можете открыть собственное навигационное приложение на iOS 5 (Google Maps) и iOS 6 (Apple Maps), используя магический протокол "maps:". window.location = "maps:daddr=50.4,-4.5"

Но для запуска родного приложения Google Navigator на Android вам нужно использовать плагин phonegap. Я написал это для своих целей.

Обновление Теперь плагин обновлен для Phonegap 3.x и поддерживает Android, iOS и Windows Phone, в том числе возможность предпочитать Google Maps на iOS.

Плагин находится здесь: https://github.com/dpa99c/phonegap-launch-navigator

Ответ 2

Плагин отличный! Спасибо, что поделился! Я попробовал это в своем приложении, но, к сожалению, у меня есть Phonegap версии 3.x, и ваш плагин работает только для Phonegap 2.x: (

Итак, чтобы заставить его работать с Phonegap 3.x, я получил плагин из вашего репозитория github и внес некоторые изменения, чтобы он работал на 3.x

Измененный плагин PhoneNavigator для Phonegap 3.x можно загрузить с моего репозитория github: https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git

Как интегрировать его в проект Phonegap 3.x:

Откройте окно консоли
Войдите в свой корень приложения Phonegap.
Затем выполните: phonegap local plugin add https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
Скопируйте "phonenavigator.js" из репо (www/phonenavigator.js) в ваше приложение (например: yourapp/www)
включить в ваше приложение "phonenavigator.js":
Скопируйте "cordova.js" из репо (www/cordova.js) в ваше приложение (например: yourapp/www)
включить в ваше приложение "cordova.js":

Как использовать его:

//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");
    }
);

Ответ 3

Как упоминалось выше, на Galaxy S4 Android (только что протестировало его) работает, чтобы открыть приложение Google Maps/Navigation и waze:

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

Кредит: http://en.wikipedia.org/wiki/Geo_URI#Example

Также см. ответ здесь: fooobar.com/questions/307514/...

Ответ 4

Для записи, если кто-то найдет этот поток, посмотрев на Google, как я, он работал у меня напрямую, работая с Ionic framework, делая две вещи:

В myapp.config(...) вашего приложения добавьте
```
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|geo):/);
```
(не забудьте добавить $compileProvider как зависимость)
В файле config.xml добавьте строку
```
<access origin="geo:*" launch-external="yes"/>
```

Что все.

Ответ 5

Кордова 3.6.0 вводит второй белый список для ограничения того, каким URL-адресам разрешено запускать внешние приложения. В предыдущих версиях Кордовы все URL-адреса, отличные от http, такие как mailto:, geo:, sms: и намерение, были неявно разрешены как цель тега. Из-за возможности приложения утечки информации, если уязвимость XSS позволяет злоумышленнику создавать произвольные ссылки, эти URL-адреса также должны быть в белом списке, начиная с Cordova 3.6.0.

Кордоба 3.6.0 Белые списки

Итак, вам нужно явно добавить файл config.xml:

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