可能有复选框已经检查时,用户点击谷歌地图网站
Possible to have check boxes already checked when user clicks on google map website?
我创建了一个带有多个复选框的多层谷歌地图,以便用户可以在图层上来回切换。目前,当用户打开地图时,图层已经打开,复选框未选中。我如何修改我的代码,以便当用户打开地图时,复选框被选中并且图层处于打开状态(然后用户可以取消复选框以取消图层)。基本上:如果选中,显示图层。如果未选中,则不显示图层
我的网站:http://userpages.flemingc.on.ca/~eluli/example.html
Javascript代码:
var map, layer2, layers;
layers = [];
function initialize() {
var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
var mapOptions = {
zoom: 5,
center: ontario,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
}
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
//Layer 0 is NDP
layers [0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//Layer 1 is Liberal
layers [1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//Layer 2 is PC1
layers [2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download',
{preserveViewport: false, suppressInfoWindows: true});
// Layer 3 PC2
layers [3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//Layer 4 PC3
layers [4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//layer 5 Schools
layers [5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download',
{preserveViewport: false, suppressInfoWindows: true});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'col9',
from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
}
});
layer2.setMap(map);
// Pop-up window
layers.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
我的HTML:
<div id="map-canvas"></div>
<div id="checkboxes">
<input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
<input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
<input type="checkbox" id="layer2" onclick="toggleLayer(2)">PC1 <br>
<input type="checkbox" id="layer3" onclick="toggleLayer(3)">PC2 <br>
<input type="checkbox" id="layer4" onclick="toggleLayer(4)">PC3 <br>
<input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools
</div>
我的CSS:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
#checkboxes {
position: absolute;
top: 30px;
right: 10px;
font-family: 'arial', 'sans-serif';
font-size: 14px;
background-color: white;
border-width:5px;
border-style:groove;
}
将checked="checked"
添加到所有复选框中,如下所示:
<input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked="checked">NDP <br>
相关文章:
- 谷歌地图/GMAP3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助
- 谷歌地图 - 用户选择不允许位置
- 当用户与谷歌地图交互时,如何从中获取信息
- 在谷歌地图上显示用户当前位置并更新
- 谷歌地图赢得'当用户拒绝共享位置时,t初始化
- 谷歌地图:使用自定义标记显示当前用户位置
- 在谷歌地图API JS V3上显示距离用户当前位置最近的多个标记,距离30公里
- 如何使用“地图”在谷歌地图上显示用户位置;onclick”;作用
- 从用户那里获取谷歌地图坐标
- 让谷歌地图加载*后*找到用户的位置
- Javascript - 确定用户当前位置是否在谷歌地图的 KML 层中
- 谷歌地图 禁用用户对所有事件的平移
- 用户在谷歌地图上标记一个位置
- 更改用户点击时的谷歌地图标记图标
- 在嵌入谷歌地图的图像中添加用户界面
- 如何使用谷歌地图跟踪用户位置和路线
- 谷歌地图API - 获取用户的地址
- 用户提交位置后,重新居中谷歌地图
- 将用户限制为一个矩形谷歌地图API
- 如何在谷歌地图中收听用户生成的缩放