$ scope.initialize = function（）{
$ scope.mapOptions = {
zoom：8，
center：new google.maps.LatLng （22.649907498685803，88.36255413913727）
};
$ scope.map = new google.maps.Map（document.getElementById（'googleMap'），$ scope.mapOptions）;
$ scope.loadScript = function（）{
var script = document.createElement（'script'）;
script.type ='text / javascript';
script.src ='https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild（script）;
setTimeout（function（）{
$ scope.initialize（）;
}，500）;
$ b setTimeout存在，因为需要一段时间才能下载google map src准备好了。 &安培; callback = initialize 是需要的，因为通过这个google map可以进行回调了。主要的问题是代码 google.maps.event.addDomListener （window，'load'，initialize）没有执行，如果我添加谷歌地图src在部分而不是主index.html的头部。但这个设置完美无瑕。
这个块到html
< div class =form-group col-lg-12id =googleMap>
< center>正在等待地图...< / center>
< / div>
现在将 ng-init =loadScript（）任何外部div中的任何位置，以便loadScript在之前进行初始化。
How is it possible to use the Google Maps API with AngularJS?
I am using this code in my AngularJS app:
<style>
#googleMap {
width: 200px;
height: 200px;
}
</style>
<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script language="javascript">
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This code is in the view and not in the controller.
I have other functions in the view and they work, but google map is still not working.
This is the error I get in the browser console:
What am I doing wrong?
I searched the web but everyone seems to be using libraries like angular-google-map or ui-map. Why is no one using the direct API?
解决方案
It was late to post but I have done this as solution. By this there is no need to add the google map script src in the head of the html or there is no chance of any error for google map src related errors. The script will be added automatically by the loadScript function. In angular it is needed to add new js src in partials rather than the head of main script. So I think this will be the best solution
I used this code chunk into my controller.
$scope.initialize = function() {
$scope.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
};
$scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
}
$scope.loadScript = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(script);
setTimeout(function() {
$scope.initialize();
}, 500);
}
setTimeout is there because some time is needed for google map src to be downloaded and be ready. & callback=initialize is needed because by this google map will be ready for a callback.The main problem was that the code google.maps.event.addDomListener(window, 'load', initialize) was not executing if I add the google map src in partial rather than the head of main index.html. But this setup works flawlessly.
And this chunk to the html
<div class="form-group col-lg-12" id="googleMap">
<center>Waiting for the map...</center>
</div>
Now place ng-init="loadScript()" anywhere in any outer div so that loadScript initializes before.
这篇关于Google Maps API如何与AngularJS一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..