マップに複数のKMLレイヤーを追加する際の注文方法

Question

私は一度クリックしたマップにロード2つのKMLレイヤがあります：マップ上に

<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button> 
<script> 

src = "https://github.com/YourCity/hello-world/blob/readme-edits/"+name+".kmz?raw=true"} 
srca = " https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1" 


function initialize() { 
    var mapCanvas = document.getElementById('map'); 
    var mapOptions = { 
     center: new google.maps.LatLng(51.50275896, -0.11535645), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(mapCanvas, mapOptions) 

    loadKmlLayer(src, map); 
    loadKmlLayera(srca, map); 
} 

このコードの動作と負荷の両方の層を、しかし、私が最初にロードするためにloadKmlLayer（SRC、マップ）を好きだろうが、それはありませんない。私がページをリフレッシュしてもう一度やり直すと、不思議なことに！私はそれを最初に上にロードする理由と方法を理解できません。

srcaレイヤーがsrcレイヤーよりも大きいので、サイズが影響を受ける可能性があると考えていました。どんな助けも良いでしょう！

は（ 'LoadkmlLayer' & "LoadkmlLayeraは私のコードの別の場所で定義された関数です。）

Answer 1

使用のZIndex。 zIndexの値が最も小さいレイヤーが下になり、最も大きいレイヤーが上になります。

コードスニペット：

var name = "bcg"; 
 
var src = "https://github.com/YourCity/hello-world/blob/readme-edits/" + name + ".kmz?raw=true" 
 
var srca = "https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1" 
 

 

 
function initialize() { 
 
    var mapCanvas = document.getElementById('map'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(51.50275896, -0.11535645), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions) 
 

 
    loadKmlLayer(src, map, 1); 
 
    loadKmlLayer(srca, map, 0); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function loadKmlLayer(src, map, zIndex) { 
 
    var ctaLayer = new google.maps.KmlLayer({ 
 
    url: src, 
 
    zIndex: zIndex, 
 
    map: map 
 
    }); 
 
    google.maps.event.addListener(ctaLayer, 'status_changed', function() { 
 
    document.getElementById('status').innerHTML += "src=" + src + " status=" + ctaLayer.getStatus() + "<br>"; 
 
    }) 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button> 
 
<div id="status"></div> 
 
<div id="map"></div>