Javascript 谷歌地图集成需要大量的时间来加载。

Javascript 谷歌地图集成需要大量的时间来加载。,javascript,angularjs,google-maps,Javascript,Angularjs,Google Maps,我正在使用angular-google-maps.min.js 加载需要很多时间,而且会阻塞整个页面。如何减少加载时间? 下面是我的代码: <div flex="100" > <ui-gmap-google-map center='map.center' zoom='map.zoom' aria-label="Google map"> <ui-gmap-

我正在使用angular-google-maps.min.js 加载需要很多时间,而且会阻塞整个页面。如何减少加载时间? 下面是我的代码:

         <div flex="100" >
      <ui-gmap-google-map 
          center='map.center' 
          zoom='map.zoom'  
          aria-label="Google map">
        <ui-gmap-marker ng-repeat="marker in markers"
                        coords="marker.coords" 
                        options="marker.options" 
                        events="marker.events" idkey="marker.id">
          <ui-gmap-window>
            <div>
               <img class="img-responsive img-circle" ng-src="{{ FILE_SERVER }}sectors/{{marker.window.Pksectorid}}/{{marker.window.Pksectorid}}large.jpeg" err-src="assets/images/img.jpg" />
                  Shop Name : {{marker.window.title}} - 
                  Employees # : <a ui-sref="employees({ sectorid: {{ marker.window.Pksectorid }} })">{{ marker.window.Employeecount }}</a>
            </div>
          </ui-gmap-window>
        </ui-gmap-marker>
      </ui-gmap-google-map>
     </div>

店名:{{marker.window.title}-
雇员#:{{marker.window.Employeecount}

不要为每个标记创建信息窗口,而是尝试初始化信息窗口的单个实例,然后在单击标记后设置其内容,如下所示:

angular.module('appMaps',['uiGmapgoogle-maps']))
.controller('mainCtrl',函数($scope){
$scope.map={
中心:{纬度:40.1451,经度:-99.6680},
缩放:2,
选项:{scrollwheel:false},
活动:{
单击:函数(标记、事件名、模型、参数){
var properties=$scope.markers[model.idKey].properties;
$scope.map.window.coords=model.coords;
$scope.map.window.title=properties.title;
$scope.map.window.show=true;
}
},
窗口:{}
};
$scope.closeClick=函数(){
this.window=false;
};
var getRandomLat=函数(){
return Math.random()*(180.0)-90.0;
};
var getRandomLng=函数(){
return Math.random()*(360.0)-180.0;
};  
var createRandomMarker=函数(i){
返回{
坐标:{纬度:getRandomLat(),经度:getRandomLng()},
选项:{},
事件:{},
属性:{title:'Marker'+i.toString(),Employeecount:0},
id:我
};
};
$scope.markers=[];
对于(变量i=0;i<100;i++){
$scope.markers.push(createRandomMarker(i));
}
});
.angular谷歌地图容器{
位置:绝对位置;
排名:0;
底部:0;
右:0;
左:0;
}

店名:{{map.window.title}-
雇员#:{{map.window.Employeecount}

我在这里找到了参考:



使用了ui gmap标记,而不是带有ng repeat的ui gmap标记。

尝试将其保留在页面末尾。然后在页面加载后开始加载..你能创建一个plunk吗..你有多少个标记?大约70到80个标记它加载所有的
{{marker.window.Pksectorid}large.jpeg
图像吗?
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="markers" coords="'self'" modelsbyref="false"/>
</ui-gmap-google-map>