Javascript 谷歌地图API如何与AngularJS一起工作？

如何将谷歌地图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>

#谷歌地图{
宽度：200px；
高度：200px；
}
var映射；
函数初始化（）{
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP，
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
};
map=new google.maps.map（document.getElementById（'googleMap'）、mapOptions）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

此代码在视图中，而不在控制器中

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

我在视图中有其他功能，它们可以工作，但谷歌地图仍然不能工作

这是我在浏览器控制台中遇到的错误：

错误：未定义google @第2行>评估：10:2

---

.globalEval/您可以在angularjs中实现google地图，而无需使用任何类似的插件

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

$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);

在控制器中，您将id=“map”与如下范围粘合

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

$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，在一个引导模型中

---

希望这有帮助

您可以在angularjs中实现google地图，而无需使用任何类似的插件

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

$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);

在控制器中，您将id=“map”与如下范围粘合

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

$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，在一个引导模型中

---

希望这有帮助

发帖已经很晚了，但我已经将此作为解决方案这样就不需要在html的头部添加google map脚本src，或者google map src相关错误不可能出现任何错误。该脚本将由loadScript函数自动添加。在angular中，需要在部分中添加新的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需要一些时间才能下载并准备就绪<需要code>callback=initialize，因为此google map将准备好回调。主要问题是，如果我将google map src部分添加而不是main index.html的头部，则代码

google.maps.event.adddomstener（窗口'load'，initialize）

未执行。但这种设置工作完美无瑕

然后将该块转换为html

<div class="form-group col-lg-12" id="googleMap">
      <center>Waiting for the map...</center>
</div>

等待地图。。。

---

现在将

ng init=“loadScript（）”

放在任何外部div中的任何位置，以便loadScript在此之前进行初始化。

发布时间已晚，但我已将此作为解决方案这样就不需要在html的头部添加google map脚本src，或者google map src相关错误不可能出现任何错误。该脚本将由loadScript函数自动添加。在angular中，需要在部分中添加新的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需要一些时间才能下载并准备就绪<需要code>callback=initialize，因为此google map将准备好回调。主要问题是，如果我将google map src部分添加而不是main index.html的头部，则代码

google.maps.event.adddomstener（窗口'load'，initialize）

未执行。但这种设置工作完美无瑕

然后将该块转换为html

<div class="form-group col-lg-12" id="googleMap">
      <center>Waiting for the map...</center>
</div>

等待地图。。。

---

现在将

ng init=“loadScript（）”

放在任何外部div中的任何位置，以便loadScript在此之前进行初始化。

是否将Google Map javascript包含在页面的头部？maps.googleapis.com/maps/api/js“>部分中没有。但我也试过用头写字。但不起作用。什么都没有显示。div容器是可见的，但是div中没有映射。@usainbroot是否可以在plunklr中拥有更多的代码？由于错误表明var google尚未定义，这通常意味着google的Map JavaScript没有正确加载（或在正确的时间加载），现在我再次重新启动服务器，最上面的错误是这一行。“错误：无效的属性id。抱歉，但无法发布全部代码。它太大了。我可以尝试重新生成一个较小的。是否有可能当angular读取脚本时，地图不可用？因为地图js是一个链接，所以当时可能没有下载。我在web上搜索过，但每个人都在使用像angu这样的库。”lar google map、ui map等。但是为什么不直接编写一个呢？您在页面的头部包含google map javascript吗？maps.googleapis.com/maps/api/js“>不在部分中。但我也试过用头写字。但不起作用。什么都没有显示。div容器是可见的，但是div中没有映射。@usainbroot是否可以在plunklr中拥有更多的代码？由于错误表明var google尚未定义，这通常意味着google的Map JavaScript没有正确加载（或在正确的时间加载），现在我再次重新启动服务器，最上面的错误是这一行。“错误：无效的属性id。抱歉，但无法发布全部代码。它太大了。我可以尝试重新生成一个较小的。是否有可能当angular读取脚本时，地图不可用？因为地图js是一个链接，所以当时可能没有下载。我在web上搜索过，但每个人都在使用像angu这样的库。”谷歌地图，用户界面地图等，但为什么不