Google Maps API如何与AngularJS一起使用？
如何使用Google Maps API和AngularJS？
我在我的AngularJS应用程序中使用此代码：
<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>
该代码在视图中，而不在控制器中。
我在视图中有其他功能，他们工作，但谷歌地图仍然无法正常工作。
这是我在浏览器控制台中遇到的错误：
错误：google未定义@http：// localhost：3000 / js / jquery-1.11.2.min.js第2行> eval：10：2 .globalEval / <@http：// localhost：3000 / js / jquery -1.11.2.min.js：2：2615 .globalEval @ http：// localhost：3000 / js / jquery-1.11.2.min.js：2：2589 .domManip @ http：// localhost：3000 / js /jquery-1.11.2.min.js:3:23105 .after @ http：// localhost：3000 / js / jquery-1.11.2.min.js：3：21067 Cehttp：// localhost：3000 / js / angular / lib / angular.min.js：176：70 n @ http：// localhost：3000 / js / angular / lib / angular-route-segment.min.js：7：5868 .compile / http：// localhost ：3000 / js / angular / lib / angular-route-segment.min.js：7：6428 Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：128：120 p @ http：// localhost：3000 / js / angular / lib / angular-route-segment.min.js：7：2649 this。$ gethttp：// localhost：3000 / js / angular / lib / angular-route- segment.min.js：7：3989 f / <@http：// localhost：3000 / js / angular / lib / angular.min.js：112：20 Pe / this。$ gethttp：// localhost：3000 / js /angular/lib/angular.min.js:125:301 Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：12 2：390 Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：126：56 l @ http：// localhost：3000 / js / angular / lib / angular.min .js：81：169 v @@ localhost：3000 / js / angular / lib / angular.min.js：85：301 vf / http：// localhost：3000 / js / angular / lib / angular.min的.js：86：315
我究竟做错了什么？
我搜索了网页，但似乎每个人都在使用angular-google-map或ui-map等库。 为什么没有人使用直接API？
你可以在没有使用任何插件的情况下在angularjs中实现谷歌地图，
<!--use this div where ever you want to create a map-->
<div id="map"></div>
定义地图div的宽度和高度，
#map {
height:420px;
width:600px;
}
在控制器中，你将这个id =“map”粘贴到这个范围内，
$scope.mapOptions = {
zoom: 4,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);
如果您想为您想要的城市或国家创建标记，
var cities = "Atlanta, USA";
var geocoder= new google.maps.Geocoder();
$scope.markers = [];
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat(), info.lng())
});
}
geocoder.geocode( { 'address': cities }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newAddress = results[0].geometry.location;
$scope.map.setCenter(newAddress);
createMarker(newAddress)
}
});
最后但并非最不重要的一点是，在做所有这些事情之前，确保你已经添加了Google Maps API脚本，
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
这里是有代码的工作plunker，在bootstrap模型中，
http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview
参考
希望这可以帮助！
发布已经很晚了，但我已经将其作为解决方案。 通过这个，没有必要在html的头部添加谷歌地图脚本src，或者没有任何错误的谷歌地图src相关的错误的机会。 该脚本将由loadScript函数自动添加。 在angular中，需要在partials中添加新的js src，而不是主脚本的头部。 所以我认为这将是最好的解决方案
我用这个代码块进入我的控制器。
$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是有的，因为需要一段时间才能下载谷歌地图src并准备好。 ＆ callback=initialize是需要的，因为通过这个谷歌地图将准备回调。主要问题是代码google.maps.event.addDomListener(window, 'load', initialize)不执行，如果我添加谷歌地图src部分而不是主index.html的头部。 但是这个设置完美无瑕。
和这个块到html
<div class="form-group col-lg-12" id="googleMap">
<center>Waiting for the map...</center>
</div>
现在将ng-init="loadScript()"放置在任何外部div的任何位置，以便loadScript在之前进行初始化。