угловые js-карты call: url не удалось загрузить веб-страницу. URL-адрес не может быть показан.

Question

Я пытаюсь сделать вызов карт из своего приложения с ионной картой. В моем HTML файл я использую:

<a ng-href="maps://?q={{dest.Latitude}},{{dest.Longitude}}">Maps</a> 
<div>{{dest.Latitude}},{{dest.Longitude}}</div> 

В моем контроллере Данные для dest выглядит следующим образом:

{"Latitude":12.34567, "Longitude":1.23456} 

широта и долгота отображаются в DIV правильно.

Но я получаю сообщение об ошибке, если я щелкаю по ссылке:

Failed to load webpage with error: The URL can't be shown 

Я также попытался бросить латы и долго строки, но это не имело никакого влияния на него.

Если я использую статические geocordinates, как это все работает отлично:

<a ng-href="maps://?q=12.34567,1.23456">Maps</a> 

Что мне не хватает?

Answer 1

Вы должны добавить map в href Sanitization white list.

пример кода:

angular.module('app',[]) 
 
.config(
 
    function($compileProvider){ 
 
     $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|map|geo|skype):/); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <a ng-href="map:lat=51.527141,lon=-0.087853">Map</a> 
 
    <a ng-href="skype:username">Skype</a> 
 
</div>

CompileProvider Docs

Answer 2

Просто убедитесь, что тестируете его на устройстве iOS? Если я не ошибаюсь, карты: // протокол работает только на iOS с Apple Maps.

Answer 3

Ну решение compileProvider не работал для меня, так что я сделал обходной путь.

В моем контроллере я использую:

$scope.navigate = function(){ 
    var geoString = 'maps://?q='+dest.Latitude+','+dest.Longitude+''; 
    window.open(geoString, '_system'); 
    }; 

И я звоню функции, как здесь:

<button ng-click="navigate()" class="button button-icon ion-earth"></button> 

Это работает. Я думаю, что есть проблема с привязкой данных в href.