问显示加载屏幕，直到使用谷歌地图设置geojson数据标记的样式
EN

Stack Overflow用户

提问于 2019-04-08 04:57:18

回答 1查看 242关注 0票数 0

我想使地图可见，一旦每一个标记在它与适当的风格。

我正在使用自定义标记图标，这就是为什么设置标记的样式需要花费大量时间。

loadGeoJson有回调功能，但我希望在完成setStyle时，而不是在loadGeoJson时显示映射。我想，不知何故，我应该为setStyle事件做一个回调。不幸的是，我也找不到一个解决办法，闲置和倾斜加载谷歌地图事件。

function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -1.54108, lng: 37.759902 },
        zoom: 5,
    });
   map.data.loadGeoJson(GEOJSON);
   map.data.setStyle(styleFeature);
}
//////////////////////////////////////////////////
function styleFeature(feature) {
    var icon = {
        url: feature.getProperty('icon'), //logos come from google drive
        scaledSize: new google.maps.Size(30, 30),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 30)
    };
    var chain = feature.getProperty('chain');

    return {
        icon: icon,
        title: chain,
        visible: true

    }    
};

下面是这个问题的一个工作示例：https://jsfiddle.net/6bznm32v/

它只有一些自定义标记的图像，但仍然有一些加载时间。

javascript

google-maps-api-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-09 18:56:39

看起来，判断图标何时出现在地图上的方法是将onload事件侦听器附加到图标图像中，然后在它们全部加载后删除“加载”指示。

请注意，下面的代码假设所有功能都有自定义图标，如果有些特性没有，计算就会变得更加复杂。

var featuresToBeStyled;  // number of features in the GeoJSON file
map.data.loadGeoJson('https://api.myjson.com/bins/bdmco', {}, function(features) {
  console.log("loadGeoJson complete, "+features.length+" features");
  featuresToBeStyled=features.length;
});
var iconsLoaded = 0;  // icons whose images have loaded
function styleFeature(feature) {
    var img = new Image();
    img.onload = (function(idx, feature) {
      return function () {
         var timeImage = performance.now();
         iconsLoaded++;
         if (iconsLoaded==featuresToBeStyled)
           document.getElementById('loaddiv').style.display="none";
      }
    })(styledFeatures,feature);
    img.src = feature.getProperty('icon');
    var icon = {
        url: feature.getProperty('icon'), 
        scaledSize: new google.maps.Size(30, 30),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 30)
    };
    var amenity = feature.getProperty('amenity');
    return {
        icon: icon,
        title: amenity,
        visible: true,
    }
}

概念证明

代码片段：

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#loaddiv {
  BORDER-RIGHT: #785e4f 4px groove;
  PADDING-RIGHT: 20px;
  BORDER-TOP: #785e4f 4px groove;
  PADDING-LEFT: 20px;
  FONT-WEIGHT: bold;
  Z-INDEX: 100;
  FILTER: alpha(opacity=75);
  LEFT: 260px;
  PADDING-BOTTOM: 20px;
  MARGIN-LEFT: auto;
  BORDER-LEFT: #785e4f 4px groove;
  WIDTH: 250px;
  MARGIN-RIGHT: auto;
  PADDING-TOP: 20px;
  BORDER-BOTTOM: #785e4f 4px groove;
  POSITION: absolute;
  TOP: 150px;
  BACKGROUND-COLOR: #FFFFFF;
  /* BACKGROUND-COLOR: #e7b047; */
  TEXT-ALIGN: center;
  opacity: .75
}

<div id="loaddiv">Loading.....&#160;&#160;&#160; please wait!<br /></div>
<div id="map"></div>


<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script type="text/javascript">
  var map;
  var featuresToBeStyled;
  var initialLoad = performance.now();

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {
        lat: -1.54108,
        lng: 37.759902
      }
    });
    // NOTE: This uses cross-domain XHR, and may not work on older browsers.
    map.data.loadGeoJson('https://api.myjson.com/bins/bdmco', {}, function(features) {
      console.log("loadGeoJson complete, " + features.length + " features");
      featuresToBeStyled = features.length;
    });
    map.data.setStyle(styleFeature); //just once this is done I would like to show the map. Until it is not, I would like to show a loading screen
  }
  var iconsLoaded = 0;

  function styleFeature(feature) {
    var img = new Image();
    img.onload = (function(feature) {
      return function() {
        var timeImage = performance.now();
        iconsLoaded++;
        if (iconsLoaded == featuresToBeStyled)
          document.getElementById('loaddiv').style.display = "none";
      }
    })(feature);
    img.src = feature.getProperty('icon');
    var icon = {
      url: feature.getProperty('icon'),
      scaledSize: new google.maps.Size(30, 30),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 30)
    };
    var amenity = feature.getProperty('amenity');
    return {
      icon: icon,
      title: amenity,
      visible: true,
    }
  }
</script>