角度地图。如何在地图加载之前加载所有浏览器中的所有标记？

Question

问题：

我正在尝试在 angular-map 加载之前将 1369 个地图标记放在它上面，但我遇到了一致性问题。地图加载所有 1369 的一半时间，另一半将加载随机数。

Map.js

    angular.module('dogMap')
    .controller('MapCtrl', function($scope, $meteor, uiGmapGoogleMapApi) {
      uiGmapGoogleMapApi.then(function(maps) {
        var dogParks = $meteor.collection(DogParks);

        $scope.map = {
          zoom: 4,
          bounds: {},
          center: {
            latitude: 40.1451,
            longitude: -99.6680
          }
        };

        function assignMarkersToMap() {
          markers = [];
          for (var i=0; i < (dogParks.length - 1); i++) {
            markers.push({
              latitude: dogParks[i].latitude,
              longitude: dogParks[i].longitude,
              title: dogParks[i].name,
              id: dogParks[i]._id,
              icon: "https://developers.google.com/maps/documentation/javascript
                     /examples/full/images/beachflag.png"
            });
          };
          return markers;
        };

        $scope.markers = [];
        // Get the bounds from the map once it's loaded
        $scope.$watch(function() {
          return $scope.map.bounds;
        }, function(nv, ov) {
          // Only need to regenerate once
          if (!ov.southwest && nv.southwest) {
            var markers = []
            $scope.markers = assignMarkersToMap();
          }
        }, true);

        $scope.markerCount = function() {
          console.log($scope.markers.length);
        };


        $scope.windowCoords = {};
        $scope.parkName = "cool";

        $scope.onClick = function(marker, eventName, model) {
            $scope.map.center.latitude = model.latitude;
            $scope.map.center.longitude = model.longitude;
            $scope.map.zoom = 11;
            $scope.windowCoords.latitude = model.latitude;
            $scope.windowCoords.longitude = model.longitude;
            $scope.parkName = model.title;
            $scope.show = true;
        };

        $scope.closeClick = function() {
            $scope.show = false;
        };

        $scope.options = {
          scrollwheel: false
        };

        $scope.show = false;

      });
    });

ma​​p.html

<h1>Testing Map View</h1>

<div id="map_canvas">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" 
                      options="options" bounds="map.bounds" control="googlemap">
      <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" 
                       options="'options'" doRebuildAll="true" click="onClick">
        <ui-gmap-window show="show" coords='windowCoords' closeClick="closeClick()">
            <div>{{parkName}}</div>
        </ui-gmap-window>
      </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

<button ng-click="markerCount();">Marker Count</button>

Answer 1

显然，所提供示例中的主要问题（从性能角度来看）与信息窗口有关，而不是为每个标记创建信息窗口，您可以创建一个信息窗口的单个实例以在所有人之间共享标记。

作为一个小改进，等待地图准备好，而不是 $watch，您可以使用 uiGmapIsReady 服务。

示例

这个例子展示了如何渲染1000标记：

angular.module('dogMap', ['uiGmapgoogle-maps'])
    .controller('MapCtrl', function($scope, uiGmapGoogleMapApi,uiGmapIsReady) {
      uiGmapGoogleMapApi.then(function(maps) {
        //var dogParks = $meteor.collection(DogParks);
        var dogParks = genarateDogParks(1000);

        $scope.map = {
          zoom: 4,
          bounds: {},
          center: {
            latitude: 40.1451,
            longitude: -99.6680
          }
        };

        function assignMarkersToMap() {
          markers = [];
          for (var i=0; i < dogParks.length; i++) {
            markers.push({
              latitude: dogParks[i].latitude,
              longitude: dogParks[i].longitude,
              title: dogParks[i].name,
              id: dogParks[i]._id,
              icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
            });
          };
          return markers;
        };

        $scope.markers = [];
        
        
        uiGmapIsReady.promise()                    
        .then(function(instances) {           
           $scope.markers = assignMarkersToMap();
        });
 

        $scope.windowCoords = {};

        $scope.onClick = function(marker, eventName, model) {
            $scope.map.center.latitude = model.latitude;
            $scope.map.center.longitude = model.longitude;
            $scope.map.zoom = 11;
            $scope.windowCoords.latitude = model.latitude;
            $scope.windowCoords.longitude = model.longitude;
            $scope.parkName = model.title;
            $scope.show = true;
        };

        $scope.closeClick = function() {
            $scope.show = false;
        };

        $scope.options = {
          scrollwheel: false
        };

        $scope.show = false;

      });
    });


function genarateDogParks(count){
    var vals = [];
    for(var i = 0; i < count; i++) {
        vals.push({
            latitude: getRandomArbitrary(33.192528,48.209871),
            longitude: getRandomArbitrary(-118.586462,-81.716346),
            _id: i,
            name: 'Dog Park #' + i     
        });     
    }
    return vals;    
}    


function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

.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="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="dogMap" ng-controller="MapCtrl">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" 
                      options="options" bounds="map.bounds" control="googlemap">
      <ui-gmap-window show="show" coords='windowCoords' closeClick="closeClick()">
            <div>{{parkName}}</div>
      </ui-gmap-window>                
      <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" 
                       options="'options'" doRebuildAll="true" click="onClick">
      </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

JSFiddle 演示如何在地图上渲染 3000 对象