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

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

＆＃13;

<span class="white">Text</span>

＆＃13;

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

＆＃13;

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

＆＃13;

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代替带有ng-repeat的ui-gmap-marker。

Google地图集成需要花费大量时间才能加载。

2 个答案: