2010-10-04 17 views
0

Je regarde cet exemple GMaps, et je voudrais qu'il commence par la mise au point du clavier (donc je peux naviguer en utilisant les touches diretional et '+' et '-' pour le zoom), y at-il un moyen?Comment démarrer cette démo GMaps avec le focus clavier?

Le code exemple est:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<title>Google Maps JavaScript API v3 Example: Map Simple</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
     function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"></div> 
</body> 
</html> 

Répondre

1

Peut-être que vous avez trouvé la réponse déjà, mais en laissant ma solution ici pour référence de toute façon. J'ai eu la même question et fixe avec un peu d'aide jQuery:

$(document).keyup(function(event) { 
    var offset = 128; 
    switch(event.keyCode) { 
     case 37: //leftArrow 
     map.panBy(-offset,0); 
     break; 
     case 38: //upArrow 
     map.panBy(0,-offset); 
     break; 
     case 39: //rightArrow 
     map.panBy(offset,0); 
     break; 
     case 40: //downArrow 
     map.panBy(0,offset); 
     break; 
     case 189: //- 
     map.setZoom(map.getZoom()-1); 
     break; 
     case 187: //+ 
     map.setZoom(map.getZoom()+1); 
     break; 
    } 
    }); 

Et je keyboardShortcuts: false sur la carte de MapOptions.

+0

En fait, je n'ai jamais trouvé de réponse pour cela. Vous avez ré-implémenté les commandes? C'est une solution de contournement .. mais qu'en est-il si les commandes changent à l'avenir? ;) –

+0

Bien sûr, c'est un hack, mais il a l'avantage de me permettre de changer le décalage de panoramique et de zoom, qui sont des fonctionnalités supplémentaires dont j'avais besoin. [panBy() et setZoom()] (http://code.google.com/apis/maps/documentation/javascript/reference.html#Map) sont des méthodes standard de l'API, donc ce que j'ai réimplémenté n'est pas beaucoup. –

-1

On dirait que la réponse est: ce n'est pas possible en utilisant seulement javascript.