Question

我正在处理一些我必须使用Angular的项目。这是我第一次接触这个框架，所以我可以犯一些错误。

我创建了一个函数initMap()，当我调用Google API的文件时，它被Google Maps API回调调用（&callback=initMap中的参数<script src="..">..）。

我的函数initMap()等待bag变量值 - 它的全局变量包含我想用作标记的城市。我知道这是非常糟糕的做法，但是我花了很多时间从Angular范围获取数据 - 但我是菜鸟而我无法做到。让我们继续 - 当我收到数据时，我将通过

创建新对象

var map = new google.maps.Map(document.getElementById('map'), mapOptions)

之后，我等待idle事件，然后我将标记放在地图上。

google.maps.event.addListenerOnce(map, 'idle', function() {
    // Put markers
});

这是一个神奇的东西 - 某些地图并没有加载。我在左下角收到了灰盒子，谷歌徽标，仅此而已。当我将console.log(..)放入此侦听器时，我会在控制台中收到我的日志消息。

当我进行硬刷新（例如Ctrl + F5）时，一切正常（总是）。

我的第一个想法是从defer标记中删除script（因为在FireBug网络中我可以看到非常长的加载analitycs脚本） - 但它对我没有帮助。

真的很高兴 - 请不要发送垃圾邮件，例如＆＃34; noob，不要使用全局变量＆＃34;。如果它无法帮助我 - 请不要搞得一团糟。

此致

Answer 1

如果您使用 AngularJS ，则init可以ng-init="MapController.initMap()"您的地图。

无论如何，你需要分享更多代码，因为从这里无法理解哪个是问题。

您应该启动 AngularJS Google Maps App ，例如：

<强> HTML ：

<html ng-app="mapApp">
 . . .
  <body ng-controller="MapController" ng-init="MapController.initMap()">
    <div id="map"></div>
  </body>
</html>

<强> JS ：

angular.module('mapApp', []);

angular
  .module('mapApp')
  .controller('MapController', MapController);

  function MapController(){

  var vm = this;

     vm.initMap = function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: new google.maps.LatLng(32.483, 16.084)
        });
     }
   }

<强> CSS ：

#map{
      height: 400px;
      width:  700px;
 }

Here You can find a Plunker I made with the code Above。它真的永远不会冻结或引起像你这样的问题。
现在，您还可以使用directive对其进行初始化。使用this answer of mine about initializing it with a directive查看Its Plunker。
最后，Here you can Find another Plunker I made to add n markers to your map and make them clickable (showing information)。

我希望我能提供帮助。

Google地图未加载数据

1 个答案: