我正在使用Google地图学习Angular，并且难以在由ng-if指令控制的div中渲染地图。
对于我的应用程序，我希望在接收到$ scope.location函数的坐标时渲染地图。然后我会点击一个按钮并调用$ scope.myRide以在地图上放置一个标记。但是，发生的事情是，在我点击按钮之前，地图不会渲染。 $ scope.map中的坐标用作占位符，直到从$ scope.location接收实际坐标。 任何帮助将不胜感激：）
angular.module('MapView',[])
.config(function($stateProvider){
$stateProvider
// the state will go on the html that you want route the user.
.state('mapView', {
url: '/mapView',
templateUrl: 'app/mapView/mapView.html',
controller: function($scope){
$scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
$scope.output = document.getElementById("loc");
$scope.maker = {};
$scope.coords = {};
$scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords.lon = true; // added this
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
$scope.myRide = function(){
$scope.maker.latitude = $scope.map.center.latitude;
$scope.maker.longitude = $scope.map.center.longitude;
}
},
controllerAs: 'LoginCtrl'
});
})
以下是HTML：
<div ui-sref='mapView' >
<div ng-show = "coords.lon == true">Hello</div>
<div id="loc"></div>
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' maker=>
<ui-gmap-marker coords="maker" icon="icon" idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="btn-Center">
<button class="btn btn-danger" ng-click='myRide()' >Ride</button>
</div>
<div id="mapUsers">
<div class="clear" ng-repeat='user in mockUsers'>
<div class="mapUserImg">
<img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png">
</div>
<h1> {{ user.username }} </h1>
<p> {{ user.mess}} </p>
</div>
</div>
</div>
答案 0 :(得分：0)
[<script src="~/Scripts/app/Home.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AngularJS Examples</h1>
<div ng-app="myApp" style="width:400px;">
<div ng-controller="homeController">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Person Name:</td>
<td>
<input type="text" ng-model="Person.personName" />
</td>
</tr>
<tr>
<td>Person Age:</td>
<td>
<input type="text" ng-model="Person.personAge" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="alert alert-info" ng-if="Person.personAge < 18">
Person Age must be <strong>above 18 years.</strong>
</div>
<div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">
<strong>Valid Age.</strong>
</div>
<div ng-if="Person.personAge > 100" class="alert alert-warning">
Person Age must be <strong> between 18 and 100.</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
我有一些推荐，
1）为了进行调试，你可以在那里安装chrome扩展程序ng-inspector，你可以在html中查看中心和缩放的值，检查数据是否有意义。
2）我使用来自angular-ui的angular-google-maps，如果是，你有两个错误，
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
<ui-gmap-marker coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
标记为空并不是必需的，图标确实在官方网站中的示例中。
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
<ul>
<li>coords update ctr: {{coordsUpdates}}</li>
<li>dynamic move ctr: {{dynamicMoveCtr}}</li>
</ul>
</div>
3）在anglar-google-maps网站中，您可以使用Plnkr中的Edit进行一些第一次测试以熟悉此指令
答案 2 :(得分：0)
我注意到收到坐标后，如果我点击页面上的任意位置，地图就会加载。因此我修改了js文件以模拟点击，它可以工作。虽然这适用于我的应用程序，但我仍然不确定问题的根本问题是什么。任何帮助将不胜感激。
这是我通过添加.click（）修改的函数：
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords = true; // added this
document.getElementById('loc').click();
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()