谷歌地圖切換層開始

Question

http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch/index07.html

我上面的頁面工作正常，但如果黑白地圖 kml 圖層開始關閉以強制用戶打開它，我真的很喜歡它。 我在這張地圖上有很多事情要做，我對所有的代碼都感到很迷茫。 如果您轉到我的站點並單擊圖層按鈕，第一個選項是 BW MAP 切換。 我只想在關閉 BW MAP kml 層的情況下加載頁面。 我已經嘗試了我在這個網站上找到的幾個選項，但仍然只是反復試驗，沒有運氣......我認為這是你可能需要幫助的大部分代碼......

編輯 - “不接受”地理位置可能更容易，這樣你就可以看到我所在的地方發生了什么。 地圖將在未啟用的情況下加載到該區域....

var map, GeoMarker;

function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to GPS Center';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '11px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);

google.maps.event.addDomListener(controlUI, 'click', function() {
recenterMapOnGeoLoc()
});
}

function toggleLayer(this_layer) {
if (this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);
}
}

function recenterMapOnGeoLoc() {
map.setCenter(GeoMarker.getPosition());
}

function initialize() {
var mapDiv = document.getElementById('map_canvas');
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
};

map = new google.maps.Map(mapDiv, mapOptions);

GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({
fillColor: '#EBF4FA'
});

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});

google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});

GeoMarker.setMap(map);

trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

layer1 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
 where: ""
 },
options: {
styleId: 2,
templateId: 2
}
});


layer2 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});

layer3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});


layer5 = new google.maps.KmlLayer('http://deepfrogphoto.com/Brett-Pelletier-            Photography/Links/maps/kml/topobwkml.kml',
              {
                  suppressInfoWindows: true,
                  map: map,
                  preserveViewport: true
              });  

                                // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);     

}

google.maps.event.addDomListener(window, 'load', initialize);

if (!navigator.geolocation) {
alert('Your browser does not support geolocation');
}

  //////////////And the menu code is....

  <li><a><input checked="checked" id="show_hide_layer5" onchange="toggleLayer(layer5)"      type="checkbox" value="ON" /> B+W Map</a> </li>
            <li><a><input checked="checked" id="show_hide_layer1" onchange="toggleLayer(layer1)"   type="checkbox" value="ON" /> Backcountry Ski Lines</a> </li>
            <li><a><input checked="checked" id="show_hide_layer2" onchange="toggleLayer(layer2)" type="checkbox" value="ON" /> Resort Lifts</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer3" onchange="toggleLayer(layer3)" type="checkbox" value="ON" /> Summer Trails</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer4" onchange="toggleLayer(layer4)" type="checkbox" value="ON" /> Snow Stations</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer4" onchange="toggleLayer(trafficLayer)" type="checkbox" value="ON" /> Traffic</a> </li>"

Answer 1

如果您不希望在創建圖層時顯示圖層，請不要將它們添加到地圖（刪除{map: map}屬性（並且不要將復選框設置為“已選中”）。

 var map, GeoMarker, layer1, layer2, layer3, layer4, layer5; function HomeControl(controlDiv, map) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'Click to set the map to GPS Center'; controlDiv.appendChild(controlUI); var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '11px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '<b>Home</b>'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { recenterMapOnGeoLoc() }); } function toggleLayer(this_layer) { if (this_layer.getMap()) { this_layer.setMap(null) } else { this_layer.setMap(map); } } function recenterMapOnGeoLoc() { map.setCenter(GeoMarker.getPosition()); } function initialize() { var mapDiv = document.getElementById('map_canvas'); var mapOptions = { zoom: 20, center: new google.maps.LatLng(40.563855, -111.675426), mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(mapDiv, mapOptions); GeoMarker = new GeolocationMarker(); GeoMarker.setCircleOptions({ fillColor: '#EBF4FA' }); google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() { map.setCenter(this.getPosition()); map.fitBounds(this.getBounds()); }); google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) { alert('There was an error obtaining your position. Message: ' + e.message); }); GeoMarker.setMap(map); trafficLayer = new google.maps.TrafficLayer(); // trafficLayer.setMap(map); layer1 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { select: "skilines", from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7", where: "" }, options: { styleId: 2, templateId: 2 } }); layer2 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5", where: "" }, options: { styleId: 2, templateId: 2 } }); layer3 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { select: "summerhiking", from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr", where: "" }, options: { styleId: 2, templateId: 2 } }); layer5 = new google.maps.KmlLayer('http://deepfrogphoto.com/Brett-Pelletier- Photography/Links/maps/kml/topobwkml.kml', { suppressInfoWindows: true, // map: map, preserveViewport: true }); // Create the DIV to hold the control and // call the HomeControl() constructor passing // in this DIV. var homeControlDiv = document.createElement('div'); var homeControl = new HomeControl(homeControlDiv, map); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); } google.maps.event.addDomListener(window, 'load', initialize); if (!navigator.geolocation) { alert('Your browser does not support geolocation'); }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/geolocationmarker/src/geolocationmarker.js"></script> <li> <a> <input id="show_hide_layer5" onchange="toggleLayer(layer5)" type="checkbox" value="ON" />B+W Map</a> </li> <li> <a> <input id="show_hide_layer1" onchange="toggleLayer(layer1)" type="checkbox" value="ON" />Backcountry Ski Lines</a> </li> <li> <a> <input id="show_hide_layer2" onchange="toggleLayer(layer2)" type="checkbox" value="ON" />Resort Lifts</a> </li> <li> <a> <input id="show_hide_layer3" onchange="toggleLayer(layer3)" type="checkbox" value="ON" />Summer Trails</a> </li> <li> <a> <input id="show_hide_layer4" onchange="toggleLayer(layer4)" type="checkbox" value="ON" />Snow Stations</a> </li> <li> <a> <input id="show_hide_layer4" onchange="toggleLayer(trafficLayer)" type="checkbox" value="ON" />Traffic</a> </li> <div id="map_canvas" style="height:500px; width:500px;"></div>