角度js地图调用：url无法加载网页url无法显示

Question

我正在尝试从我的 ionic 框架应用程序进行地图调用。在我的 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

我也尝试将 lat 和 long 转换为字符串，但它对它没有任何影响。

如果我使用这样的静态地理坐标，一切正常：

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

我错过了什么？

Answer 1

好吧，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中的数据绑定存在问题。

Answer 2

您必须将map 添加到href 清理白名单中。

示例代码：

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 3

确定一下，是在 iOS 设备上测试它吗？ 如果我没记错，maps:// 协议仅适用于带有 Apple Maps 的 iOS。