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;

      });
    });

map.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

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

作为一项小改进，等待地图准备就绪，而不是class CompetitionTeamForm(Form): competition = SelectField('Competition', coerce=int) team = SelectField('Team', coerce=int) def __init__(self, *args, **kwargs): Form.__init__(self, *args, **kwargs) def validate(self): if not Form.validate(self): return False else: return True @app.route('/competitions/<int:id>', methods=['GET', 'POST']) def manage_competition(id): form = CompetitionTeamForm() # should use current competition ID here instead of a selectfield, will refactor later form.competition.choices = [(a.id, a.name) for a in Competition.query.order_by('name')] form.team.choices = [(b.id, b.number) for b in Team.query.order_by('number')]，您可以使用$watch服务。

示例

该示例显示了如何呈现uiGmapIsReady标记：

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

JSFiddle演示如何在地图上呈现<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>个对象

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

1 个答案: