Как открыть приложение карты мобильного устройства, когда пользователь нажимает на ссылку?

Question

У меня есть веб-приложение, в котором, если пользователь нажимает на ссылку, оно открывает карту. Лучшее решение, которое я могу придумать, - это открыть новую вкладку / окно для карт Google, используя атрибут target="_blank".

Но я думаю, что было бы лучше открыть приложение карты устройства вместо карты Google.

Я знаю, что у вас может появиться приложение для телефона, когда пользователь щелкает телефонный номер с атрибутом href, указывающим на tel:<the phone number>. Мне интересно, возможно ли это с приложением карты.

Можно ли разрешить тегу привязки открывать приложение карты мобильного устройства, когда пользователь щелкает по нему?

Answer 1

Вы можете использовать Схема URI GEO"гео: широта, долгота", заданная RFC 5870 в такой ссылке, как

<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>

. Также естьcomgooglemaps:, который запускает приложение Google Maps для iOS , например:

comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

Где

• center: это окно просмотра картыЦентральная точка.Отформатированный как запятая строка latitude, longitude.
• mapmode: Устанавливает тип отображаемой карты.Может быть установлено на: standard или streetview.Если не указан, будут использованы текущие настройки приложения.
• views: Включение / выключение определенных видов.Может быть установлено: satellite, traffic или transit.Несколько значений могут быть установлены с помощью запятой-разделителя.Если параметр указан без значения, он очистит все виды.
• zoom: Указывает уровень масштабирования карты.

И, как сказал технический театр, вы можетеиспользуйте обычную ссылку Apple Maps для запуска Apple Maps:

//maps.apple.com/?q=Raleigh,NC

Если вы отключите протокол, он автоматически выберет правильный для использования, поэтому, если вы хотите иметь динамическую ссылку, вы можете просто создать некоторый условный код, которыйизменяет связь между google.com и apple.com в зависимости от того, в какой системе вы находитесь.

Answer 2

На самом деле ... теперь, когда у Apple есть собственное картографическое приложение, они больше не отлавливают ссылки на карты Google и не направляют их в картографическое приложение (по умолчанию ... хотя это можно изменить на устройстве).Таким образом, теперь вы должны сделать анализ, чтобы определить, является ли устройство Android или Apple.Если вы используете правильную ссылку для правильной мобильной ОС, устройство поймает намерение и вместо использования браузера перейдет в картографическое приложение.

Если Android, ссылка будет выглядеть следующим образом:

https://maps.google.com/?q=Houston,+TX

Если Apple, ссылка такая:

http://maps.apple.com/?q=Houston,+TX

Это, безусловно, боль, и, надеюсь, W3c в конечном итоге стандартизирует триггер карты (например, тел: для телефонных номеров).Удачи!

Answer 3

Вот мое решение jQuery для этой проблемы.Я хотел быть в состоянии определить правильную карту, чтобы открыть.В 2019 году микроформаты по-прежнему автоматически не создают ссылку для мобильных телефонов.

Я использовал решение из этой статьи https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4, но изменил его, чтобы сделать его текущим и динамичным.

И изменил код, чтобы в моем html-файле мог быть адресный блок.Этот адрес разбирается с основами и отправляется в соответствующее приложение карт.

HTML

<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>

JavaScript

$(document).on('click','.map-link',function() {
    var address = $(this).html();
    address = $('<div/>')
      .html(address)
      .text() // strip tags
      .replace(/\s\s+/g, " "); // remove spaces
    address = encodeURIComponent(address);
    if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
        window.open('http://maps.apple.com/?q=' + address);
    } else { /* else use Google */
        window.open('https://maps.google.com/maps?q=' + address);
    }
});

CSS

.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}

Answer 4

Не нужно ничего особенного.Вы можете просто дважды связать адрес следующим образом.

<a href='https://maps.google.com/?q=addressgoeshere'>
  <a href='https://maps.apple.com/maps?q=addressgoeshere'>
    Address</a></a>

В Android откроется приложение Google maps, а в iOS откроется приложение Apple maps.(Не проверено на телефоне Windows)

Answer 5

Для меня лучшим ответом была стандартизация тега карты, такого как «MAP:».

Затем, чтобы сделать адрес для вызова карт, предварите его MAP:.

Поэтому, чтобы сообщить другу, где что-то, используйте что-то вроде: Map: 123 any street PA 98234.

Затем, когда щелкнет адрес (для телефона, коснулся), вызывается приложение сопоставления по умолчанию.

Добавлено из комментария:

Идея была для электронной почты и текстовых сообщений, однако, если вы хотите пример кода, это работает на Android:

try
{
    String uri = "geo:0,0?q=" + Address;
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri));
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    getApplicationContext().startActivity(intent);
}
catch (SecurityException es)
{
    if (LOG) Log.e("Dbg", "Map failed", es);
}
catch (ActivityNotFoundException e)
{
    if (LOG) Log.e("Dbg", "Map failed", e);
}

Answer 6

Да, такие теги, как тип данных и т. Д., У меня тоже не сработали. Я использовал прямую ссылку от Google (вы можете выбрать «поделиться точкой», и она даст прямой HTML, который будет указывать на местоположение).

Откроется Google Maps в браузере.