Angular Js &谷歌地图API ngGeolocation
Angular Js & google maps API ngGeolocation
我在谷歌地图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();
主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 -->
谢谢!
以前的版本在github上硬编码https://github.com/5-minute-catchup/5-min-catchup/commit/2899e013a78e93016154f1bd7d462b83f414db7e
这似乎很适合我:
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();
});
});
相关文章:
- 如何更改bigquery API中的计费层选项
- Amazon S3 REST API大小不正确
- 客户端服务器REST API captcha实现
- 使用Facebook live API创建实时视频对象时的隐私设置
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- API密钥使用和检查示例
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- 谷歌地图JS API+JSON-多个标记没有显示
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 如何在 API 调用后和 if 语句中启用提交按钮
- 与运行长作业(javascript,node.js)的第三方API同步的最佳实践
- 搜索api在mac上显示对话框
- Backbone.js restful json API design
- 标记的实时更新,无需加载页面谷歌地图API V3
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 对API数据使用声明性绑定
- Angular Js &谷歌地图API ngGeolocation