如何使用 Cordova Geolocation 插件在 Ionic App 中添加标记
Posted
技术标签:
【中文标题】如何使用 Cordova Geolocation 插件在 Ionic App 中添加标记【英文标题】：How to add a marker in an Ionic App with the Cordova Geolocation plugin 【发布时间】：2014-11-20 10:42:51 【问题描述】：我对这段代码有疑问。我可以正确查看 Google 地图，我的实际位置位于 android 屏幕的中心，但无论我做什么都看不到标记。
这是html：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style>
html, body
height:100%;
</style>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" ng-controller="GeoCtrl" class="platform-android">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
这是 services.js
angular.module('starter.services', [])
.factory('Location', ['$q', function($q)
return
getLocation: function(options)
var q = $q.defer();
navigator.geolocation.getCurrentPosition(function(position)
q.resolve(position);
, function(err)
q.reject(err);
);
return q.promise;
]);
这就是 app.js：
angular.module('starter', ['ionic', 'starter.services'])
.run(function($ionicPlatform)
...
)
.controller('GeoCtrl', function($scope, Location)
$scope.lat;
$scope.long;
$scope.map;
$scope.marker;
Location.getLocation().then(function (position)
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
var mapOptions =
center: new google.maps.LatLng($scope.lat, $scope.long),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
$scope.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
, function(err)
// error
);
$scope.marker = new google.maps.Marker(
position: new google.maps.LatLng($scope.lat, $scope.long),
map: $scope.map,
title: 'Holas!'
, function(err)
console.err(err);
);
);
谢谢！
【问题讨论】：
【参考方案1】：我希望这对某人有所帮助：
我在 then 流之外调用了标记，而它必须在内部调用：
Location.getLocation().then(function (position)
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
var mapOptions =
center: new google.maps.LatLng($scope.lat, $scope.long),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
$scope.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$scope.marker = new google.maps.Marker(
position: new google.maps.LatLng($scope.lat, $scope.long),
map: $scope.map,
title: 'Holas!'
, function(err)
console.err(err);
);
, function(err)
// error
);
现在可以了。
【讨论】：
以上是关于如何使用 Cordova Geolocation 插件在 Ionic App 中添加标记的主要内容，如果未能解决你的问题，请参考以下文章
Cordova Geolocation有时会工作，有时则不工作
使用 cordova-plugin-geolocation 时设置 NSLocationWhenInUseUsageDescription 值
Cordova geolocation navigator.geolocation.getCurrentPosition 错误的窗口访问位置
Cordova 插件 Geolocation 不适用于 Android 版本 Kitkat