angular js 地图调用:url 加载网页失败 url 无法显示
angular js maps call: url failed to load webpage the url can't be shown
我正在尝试从我的离子框架应用程序调用地图。在我的 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 中显示正确。
但是如果我点击 link:
Failed to load webpage with error: The URL can't be shown
我也尝试将纬度和经度转换为字符串,但没有任何效果。
如果我像这样使用静态地理坐标,一切正常:
<a ng-href="maps://?q=12.34567,1.23456">Maps</a>
我错过了什么?
确定一下,是否在 iOS 设备上进行测试?
如果我没记错的话,maps:// 协议仅适用于 iOS 和 Apple Maps。
您必须将 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 解决方案对我不起作用,所以我做了一个解决方法。
在我的控制器中我使用:
$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 中的数据绑定存在问题。
我正在尝试从我的离子框架应用程序调用地图。在我的 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 中显示正确。
但是如果我点击 link:
Failed to load webpage with error: The URL can't be shown
我也尝试将纬度和经度转换为字符串,但没有任何效果。
如果我像这样使用静态地理坐标,一切正常:
<a ng-href="maps://?q=12.34567,1.23456">Maps</a>
我错过了什么?
确定一下,是否在 iOS 设备上进行测试? 如果我没记错的话,maps:// 协议仅适用于 iOS 和 Apple Maps。
您必须将 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 解决方案对我不起作用,所以我做了一个解决方法。
在我的控制器中我使用:
$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 中的数据绑定存在问题。