Javascript 谷歌地图间歇性加载，没有样式

我有一个没有样式的google地图，大概30次刷新中就有1次，我认为这就是我加载地图json和地图数据的方式/顺序。我不太确定这样做的最佳方式，所以风格总是存在的。我不认为这需要任何异步函数，但不确定

import MarkerClusterer from '@google/markerclusterer';

const currentPage = $('body').attr('id');
const hasMap = currentPage === 'homePage' || currentPage === 'venuesPage';

let infoArr = [];
let infowindow;
let latLng;
let mapStyles;
let marker;
let markerAddress;
let markerCluster;
let markerCount = -1;
let markerIcon;
let markerInfo;
let markers = [];
let zoomFactor = 4;

$.get('../../data/mapStyles.json').done(data => {
  mapStyles = data;
});

$.get('/data/venues.json').done((data) => {
  if (hasMap) { // does this need to be hasMap && mapStyles?
    initializeMap(data);
  }
});
let mcOptions = {
  gridSize: 40,
  maxZoom: 16,
  zoomOnClick: true,
  minimumClusterSize: 2,
  styles: [
    {
      height: 53,
      url: '/img/meta/m1.png',
      width: 53,
    },
    {
      height: 56,
      url: '/img/meta/m2.png',
      width: 56,
    },
    {
      height: 66,
      url: '/img/meta/m3.png',
      width: 66,
    },
    {
      height: 78,
      url: '/img/meta/m4.png',
      width: 78,
    },
    {
      height: 90,
      url: '/img/meta/m5.png',
      width: 90,
    },
  ],
};

function initializeMap(data) {
  if ($(window).width() < 768) {
    zoomFactor = 3;
  }
  let map = new google.maps.Map(document.getElementById('mapContainer'), {
    zoom: zoomFactor,
    center: new google.maps.LatLng(40.0, -102.0),
    styles: mapStyles,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  markerIcon = '/img/svgs/icon_map_marker_venue.svg';

  data.forEach((venue) => {
    let {
      lat,
      long,
      name,
      streetAddress,
      city,
      state,
      slug,
    } = venue;

    if (lat !== '') {
      latLng = new google.maps.LatLng(lat, long);
      marker = new google.maps.Marker({
        position: latLng,
        icon: markerIcon,
      });
      markerAddress = `${streetAddress}<br>${city},&nbsp;${state}`;
      markerInfo = `<a class="map-marker" href="/venues/venue-detail/index.php?${slug}"><h5>${name}</h5>${markerAddress}</a>`;
      markers.push(marker);
      infoArr.push(markerInfo);
      markerCount += 1;
    }

    google.maps.InfoWindow.prototype.isOpen = function () {
      let map = this.getMap();
      return (map !== null && typeof map !== 'undefined');
    };
    infowindow = new google.maps.InfoWindow({});
    google.maps.event.addListener(marker, 'click', (function (marker, markerCount) {
      return function () {
        if (!infowindow.isOpen()) {
          infowindow.setContent(infoArr[markerCount]);
          infowindow.open(map, marker);
        } else {
          infowindow.close();
        }
      };
    }(marker, markerCount)));
  });
  markerCluster = new MarkerClusterer(map, markers, mcOptions);
}

从'@google/MarkerClusterer'导入MarkerClusterer'；
const currentPage=$（'body'）.attr（'id'）；
const hasMap=currentPage=='homePage'| | currentPage=='venuesPage'；
设infoArr=[]；
让信息窗口；
让拉丁；
让我们看看地图样式；
让标记；
让markerAddress；
让市场聚集；
设markerCount=-1；
让马克里肯；
让markerInfo；
让标记=[]；
让zoomFactor=4；
$.get（'../../data/mapStyles.json'）.done（数据=>{
地图样式=数据；
});
$.get（'/data/victions.json'）.done（（数据）=>{
如果（hasMap）{//这是否需要是hasMap&&mapStyles？
初始化映射（数据）；
}
});
设mcOptions={
网格大小：40，
maxZoom:16，
zoomOnClick：对，
最小群集大小：2，
风格：[
{
身高：53，
url:“/img/meta/m1.png”，
宽度：53，
},
{
身高：56，
url:“/img/meta/m2.png”，
宽度：56，
},
{
身高：66，
url:“/img/meta/m3.png”，
宽度：66，
},
{
身高：78，
url:“/img/meta/m4.png”，
宽度：78，
},
{
身高：90，
url:“/img/meta/m5.png”，
宽度：90，
},
],
};
函数初始化映射（数据）{
如果（$（窗口）.width（）<768）{
动物因子=3；
}
让map=new google.maps.map（document.getElementById（'mapContainer'）{
zoom:zoomFactor，
中心：新google.maps.LatLng（40.0，-102.0），
样式：地图样式，
动物控制：对，
mapTypeControl:false，
scaleControl:false，
街景控制：错误，
旋转控制：错误，
全屏控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP，
});
markerIcon='/img/svgs/icon_map_marker_vention.svg'；
data.forEach（（地点）=>{
让{
拉特，
长的
名称
街道地址，
城市
国家,，
鼻涕虫
}=地点；
如果（纬度！=''）{
latLng=新的google.maps.latLng（lat，long）；
marker=新的google.maps.marker({
位置：latLng，
图标：markerIcon，
});
markerAddress=`${streetAddress}
${city}，${state}`；
markerInfo=`；
标记器。推（标记器）；
信息传送推送（markerInfo）；
markerCount+=1；
}
google.maps.InfoWindow.prototype.isOpen=函数（）{
让map=this.getMap（）；
return（map！==null&&typeof map！==undefined'）；
};
infowindow=newgoogle.maps.infowindow（{}）；
google.maps.event.addListener（标记，'click'，（函数（标记，标记计数）{
返回函数（）{
如果（！infowindow.isOpen（））{
setContent（infoArr[markerCount]）；
信息窗口。打开（地图、标记）；
}否则{
infowindow.close（）；
}
};
}（马克，马克计数）；
});
markerCluster=新的MarkerClusterer（地图、标记、mcOptions）；
}

我做了一个测试，json是这样的，它可以工作：

$.when($.get('../../data/mapStyles.json').done(styleData => {
  mapStyles = styleData;
}), $.get('/data/venues.json').done(vData => {
  venueData = vData;
})).then(() => {
  initialize(venueData);
});

---

也许您的

$.get

定义

mapStyles

应该同步进行，以便在继续执行之前知道它的值。谢谢，我使用了jQuery

$.when（）

，它可以工作。