javascript - 多个 GoogleMap javascript get 调用

Question

我正在迭代“用户”列表并调用脚本，以便为每个用户生成一组 3 个 googlemap。当我检查“网络”时，$.get 调用似乎只为最后一个用户调用，但所有脚本都在每个唯一用户的 HTML 中加载。

“item in Elder”是由jade渲染的元素，其中elders是用户名数组。我正在使用 Node.js Express。

if(elders)
  h2 Your Elders
  for item in elders
    h3= item
    script(async='', type='text/javascript').
        var username = "#{item}";
        var loadMap = function(){
            $.get(username+'/getGeoData/', function(data){
                //geofence configuration
                console.log("get request for: " +username)
                var geofences = {};
                geofences['test'] = {
                  center: new google.maps.LatLng(data.gfLat,data.gfLon),
                  radius: data.gfRadius * 1000
                };
                //map options: centered @ current location
                var current_lat = data.mostRecentLocation.latitude;
                var current_lon = data.mostRecentLocation.longitude;
                var currentLocation = new google.maps.LatLng(current_lat,current_lon);
                var myOptions = {
                    zoom: 9,
                    center: currentLocation
                };
                //initialize 3 maps
                var maps = [];
                var cm = 'current_map_'+username;
                var string_cm = String(cm);
                var current_map = new google.maps.Map(document.getElementById("current_map_"+"#{item}"),
                    myOptions);
                maps.push(current_map);
                var daily_map = new google.maps.Map(document.getElementById("daily_map_"+"#{item}"),
                    myOptions);
                maps.push(daily_map);
                var weekly_map = new google.maps.Map(document.getElementById("weekly_map_"+"#{item}"),
                    myOptions);
                maps.push(weekly_map);
                //set current location marker
                for (var m = 0; m < maps.length; m++ ){
                    var location_marker = new google.maps.Marker({
                        position: currentLocation,
                        map: maps[m]
                    });
                    for ( var gf in geofences ){
                      var geofenceOptions = {
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35,
                        map: maps[m],
                        center: geofences[gf].center,
                        radius: geofences[gf].radius
                      };
                      geofenceCircle = new google.maps.Circle(geofenceOptions);
                    }
                }
                //daily/weekly location path
                var dailyPathPoints = [];
                var weeklyPathPoints = [];
                for (var i = 0; i < data.locations.length; i++){
                    var latitude = data.locations[i].latitude;
                    var longitude = data.locations[i].longitude;
                    var point = new google.maps.LatLng(latitude, longitude);
                    //if timestamp within week, add to week array
                    dailyPathPoints.push(point);
                    //if timestamp within day, add to daily array
                    weeklyPathPoints.push(point);
                }
                var dailyPath = new google.maps.Polyline({
                  path: dailyPathPoints,
                  geodesic: true,
                  strokeColor: '#009ED9',
                  strokeOpacity: 1.0,
                  strokeWeight: 2
                });
                dailyPath.setMap(daily_map);
                var weeklyPath = new google.maps.Polyline({
                  path: dailyPathPoints,
                  geodesic: true,
                  strokeColor: '#009ED9',
                  strokeOpacity: 1.0,
                  strokeWeight: 2
                });
                weeklyPath.setMap(weekly_map);
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    google.maps.event.trigger(current_map, 'resize');
                    google.maps.event.trigger(daily_map, 'resize');
                    google.maps.event.trigger(weekly_map, 'resize');
                    current_map.setCenter(currentLocation);
                    daily_map.setCenter(currentLocation);
                    weekly_map.setCenter(currentLocation);
                });
            }); //$.get()
        };
        window.onload = loadMap;
    .row
      .col-md-4.col-sm-6.col-xs-12
        .panel.with-nav-tabs.panel-default
            .panel-heading#with-tabs
                .navbar-text Location
                ul.nav.nav-tabs
                    li.active
                        a(href='#tab1loc', data-toggle='tab') Current
                    li
                        a(href='#tab2loc', data-toggle='tab') Daily
                    li
                        a(href='#tab3loc', data-toggle='tab') Weekly
            .panel-body
                .tab-content
                    #tab1loc.tab-pane.fade.in.active
                        div(id='current_map_'+item, class='map')
                    #tab2loc.tab-pane.fade
                        div(id='daily_map_'+item, class='map')
                    #tab3loc.tab-pane.fade
                        div(id='weekly_map_'+item, class='map')

Answer 1

您正在为 Elders 中的每个项目覆盖函数 loadMap，因此一旦页面加载，仅执行最后一个函数 loadMap。

解决这个问题的方法可能是将函数添加到数组中。像这样的东西:

var loader = [];

var loadMap = function(){
     var username = "#{item}";
     // rest of your code
}
loader.push(loadMap);

一旦循环(长辈中的项目)完成，调用每个函数

while(loader.length){
    var fn = loader.pop();
    fn();
    // or even shorter 
    // loader.pop()();
}