谷歌地圖集成需要大量時間來加載。

Question

我正在使用 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>

Answer 1

與其為每個標記創建信息窗口，不如嘗試初始化信息窗口的單個實例，然后在單擊標記后設置其內容，如下所示：

 angular.module('appMaps', ['uiGmapgoogle-maps']) .controller('mainCtrl', function($scope) { $scope.map = { center: { latitude: 40.1451, longitude: -99.6680 }, zoom: 2, options: { scrollwheel: false }, events: { click: function(marker, eventName, model, arguments) { var properties = $scope.markers[model.idKey].properties; $scope.map.window.coords = model.coords; $scope.map.window.title = properties.title; $scope.map.window.show = true; } }, window: {} }; $scope.closeClick = function () { this.window = false; }; var getRandomLat = function() { return Math.random() * (180.0) - 90.0; }; var getRandomLng = function () { return Math.random() * (360.0) - 180.0; }; var createRandomMarker = function(i) { return { coords: { latitude: getRandomLat(), longitude: getRandomLng()}, options: {}, events: {}, properties: {title: 'Marker' + i.toString(), Employeecount: 0 }, id: i }; }; $scope.markers = []; for (var i = 0; i < 100; i++) { $scope.markers.push(createRandomMarker(i)); } });

 .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> <div ng-app="appMaps" ng-controller="mainCtrl"> <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="map.events" idkey="marker.id"> </ui-gmap-marker> <ui-gmap-window show="map.window.show" coords="map.window.coords" > <div> <img class="img-responsive img-circle" ng-src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Mercedes-Benz_Zetros_2008.jpg/1280px-Mercedes-Benz_Zetros_2008.jpg" /> Shop Name : {{map.window.title}} - Employees # : <a ui-sref="employees({ sectorid: {{ map.window.Pksectorid }} })">{{ map.window.Employeecount }}</a> </div> </ui-gmap-window> </ui-gmap-google-map> </div>

Answer 2

我在這里找到了參考：

https://www.kevinhooke.com/2015/06/15/angularjs-and-google-maps-dynamic-marker-updates/

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="markers" coords="'self'" modelsbyref="false"/>
</ui-gmap-google-map>

使用 ui-gmap-markers 而不是 ui-gmap-marker 和 ng-repeat。