javascript - 地球夜间 map 的异步加载

Question

我想在通过 JS API 3 加载时使用此自定义 map :https://earthbuilder.google.com/10446176163891957399-13737975182519107424-4/mapview/

我不确定如何使用提供的 API 代码 addLayersToMap(map)，并且在文档中的任何位置都找不到该函数。我确信这就像在 map 上调用该函数一样简单，但这似乎并没有让我到任何地方。

这是我的嵌入代码:

        <script type="text/javascript"> 
            function initialize() {
              var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(32.26555,-110.961386)
              };

              var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

              var mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
                layerId: '06673056454046135537-08896501997766553811',
                map: map
              });
            }
            function addLayersToMap(map) {
              // Handles to the layers created.  var layers = [];
              var layerKeys = [
              ""
              ];

              for (var i = 0; i < layerKeys.length; ++i) {
                layers.push(new google.maps.visualization.MapsEngineLayer({
                  mapId: "10446176163891957399-13737975182519107424-4",
                  layerKey: layerKeys[i],
                  map: map
                }));
              }
              return layers;
            }

            function loadScript()
            {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDOkhCBaoEKOhnpEJorFi83JSb0vIEkRg4&sensor=false&callback=initialize";
                document.body.appendChild(script);
            }
            window.onload = loadScript();
        </script>

Answer 1

使用 this example 解决了这个问题来自 API 文档。只需拉出其中一层并替换 map ID即可。将其放入您的 map Canvas div 中，然后您就会变得很聪明。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script>
    var map;
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(42, -99),
        zoom: 5
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

      var mapsEngineLayer2 = new google.maps.visualization.MapsEngineLayer({
        mapId: '10446176163891957399-13737975182519107424-4',
        layerKey: 'layer_00001'
      });
      mapsEngineLayer2.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>