Angular Js和谷歌地圖API ngGeolocation

我無法在Google Maps API上顯示我的地理位置標記。Angular Js和谷歌地圖API ngGeolocation

我現在用的是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();

主HTML

<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 -->

謝謝！

上一版本在 https://github.com/5-minute-catchup/5-min-catchup/commit/2899e013a78e93016154f1bd7d462b83f414db7e

來源

2015-05-19 Stacca

你仍然有指派'$ scope.map'變量的代碼？它應該使用你的'myPosition.coords'經緯度來計算'map.center'。 –

我明白了！是的，我錯過了那些代碼。謝謝你的提示，將看看我是否可以解決這個問題。 – Stacca

硬編碼在github上這似乎這樣的伎倆對我來說：

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(); 
    }); 
});

來源

2015-05-19 20:36:23

謝謝!!!你讓我們製造商微笑！ – Stacca

Angular Js和谷歌地圖API ngGeolocation

回答

相關問題