如何使用 Cordova Geolocation 插件在 Ionic App 中添加标记答案

【问题标题】：How to add a marker in an Ionic App with the Cordova Geolocation plugin如何使用 Cordova Geolocation 插件在 Ionic App 中添加标记
【发布时间】：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);
    });
});

谢谢！

【问题讨论】：

标签： android angularjs cordova geolocation

【解决方案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
    });

现在可以了。

【讨论】：