Angularjs 和谷歌地图 API 地理位置答案

【问题标题】：Angular Js & google maps API ngGeolocationAngularjs 和谷歌地图 API 地理位置
【发布时间】：2023-04-10 03:28:01
【问题描述】：

我在获取标记以在 google maps api 上显示我的地理位置时遇到问题。

我正在使用 ng 控制器 ngGeolocation 和 http://angular-ui.github.io/angular-google-maps/

当我硬编码标记和地图位置时，我没有遇到任何麻烦。但是我一换控制器，地图就消失了。

非常感谢任何帮助

我的控制器

'使用严格';

angular.module('fiveMinCatchupApp')
.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi) {

var scope = $scope;
var lat; 
var lng

function getLocation() {
navigator.geolocation.getCurrentPosition($scope.showLocation);
};

$scope.showLocation = function(position){
  lat = position.coords.latitude;
  lng = position.coords.longitude;
  $scope.map = {
  center: {
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
  },
  zoom: 8
}

};

getLocation();

主页面

<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-markers 
models='markers'
coords="'coords'"> 
</ui-gmap-markers>
</ui-gmap-google-map>

HTML

<body ng-app="fiveMinCatchupApp">


<div class="container">
<div ng-view=""></div>
</div>

<div class="footer">
  <div class="container">
    <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
  </div>
</div>


<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
 <script>
   !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
   (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
   r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
   }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-XXXXX-X');
   ga('send', 'pageview');
</script>

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
<script src="bower_components/ngGeolocation/ngGeolocation.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>
    <!-- endbuild -->

谢谢！

在 github 上硬编码的先前版本位于 https://github.com/5-minute-catchup/5-min-catchup/commit/2899e013a78e93016154f1bd7d462b83f414db7e

【问题讨论】：

你还有分配$scope.map变量的代码吗？它应该使用您的myPosition.coords 纬度和经度来计算map.center。
我明白了！是的，我错过了那段代码。谢谢你的提示，看看我能不能解决这个问题。

标签： javascript angularjs google-maps google-maps-api-3 geolocation

【解决方案1】：

这似乎对我有用：

angular.module('fiveMinCatchupApp').controller('MainCtrl', function ($scope, uiGmapGoogleMapApi) {

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

  navigator.geolocation.getCurrentPosition(function(pos) {
    $scope.map.center = {
     latitude: pos.coords.latitude,
     longitude: pos.coords.longitude
    };
    $scope.$apply();
  });
});

【讨论】：