2014-12-10 4 views
0

http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch/index07.htmlGoogle Maps переключить слой трогании

Здравствуйте, это мы надеемся, простой вопрос для всех экспертов на этом сайте ... Моя страница выше работает нормально, но я бы очень нравится, если черно-белая карта kml-уровень начнется как отключенный, чтобы заставить пользователя переключать его. У меня много общего с этой картой, и я довольно потерял весь код. Если вы перейдете на мой сайт и нажмите кнопку слоя, первым вариантом будет BW MAP toggle. Я просто хочу, чтобы страница загружалась с BW MAP kml layer off. Я пробовал несколько вариантов, которые я нашел на этом сайте, но все же просто проб и ошибок, не повезло ... Я думаю, что это большая часть кода, который вам может понадобиться ... Спасибо.

EDIT - возможно, было бы легче «не принимать» геолокацию, чтобы вы могли видеть, что происходит, где я нахожусь. карта будет загружаться в этом районе без ее разрешения ....

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

Любая помощь по этому поводу очень признательна ... Спасибо!

ответ

0

Если вы не хотите, чтобы ваши слои отображаются при их создании, не добавить их на карту (удалить {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>

+0

да .. спасибо я знал, что это было легко исправить ... просто не знаю, как идти о делать это .. Теперь я делаю ... вы удивительный! все на этом сайте! ! – Brett

Смежные вопросы