谷歌地图切换图层开始

google maps toggle layer starting off

本文关键字:开始 图层 谷歌地图      更新时间:2023-09-26

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>"

如果不希望在创建图层时显示图层,请不要将其添加到地图中(移除 {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>