dove sbaglio a richiamare un valore?

Stefano Steve Bigoloni · 12 Set 2012

Buongiorno, sono nuovo in javascript e sto cercando di arrangiarmi come posso, ma ho un problema a cui nn riesco a venirne a capo.
vorrei fare un map con percorso il cui punto di partenza è dato dalle coordinate gps.

non riesco ad estrapolare i dati delle coordinate e metterli nella variabile partenza:

HTML:

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(gotPosition); 
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;&language=it"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function gotPosition(p) {
		this.outputStr = p.coords.latitude +','+p.coords.longitude;
		}	
function initialize() {
  
	calcRoute();
	directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = { 
		zoom:7,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
	map = new google.maps.Map(document.getElementById("map"), myOptions);    
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("panel"));

	var selectTags = document.getElementsByTagName("select");	
	for(i=0;i<selectTags.length;i++){
		selectTags[i].onchange=function(){ 
			calcRoute();
			};
		}
	}
	
	function calcRoute() {
		var partenza = [COLOR="#FF0000"]outputStr[/COLOR] 
		var arrivo = document.getElementById("arrivo").value;
		var request = {
			origin: partenza, 
			destination: arrivo,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
		directionsService.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		  }
		});
  }
window.onload = initialize;
</script>

</head>
<body>
<div>
<script type="text/javascript">
alert(abcd.eccomi());
</script>
<input id ="partenza" type="hidden" value="<%=request.QueryString("lat")%>,<%=request.QueryString("lon")%>">
<input id ="arrivo" type="hidden" value="Via Zanardelli - Gardone Riviera">
</div>
<div id="map"></div>

<div id="panel"></div> 
</body>

io cerco di richiamare la variabile con i valori ma dove sbaglio ???

Vale2 · 12 Set 2012

Ciao,

Codice:

var partenza = document.getElementById("partenza").value;

Visto che passi i dati in querystring

nomepagina.asp?lat=43.5500&lon=10.3167

coordinate di Livorno.

Valeria.

Stefano Steve Bigoloni · 12 Set 2012

correzione nel codice trascritto:

Codice:

 ...

function calcRoute() {
		var partenza = outputStr  //<<< QUI DOVE VOGLIO METTERE IL VALORE
		var arrivo = document.getElementById("arrivo").value;
		var request = {

...

Il problema non è utilizzando parametri da querystring..., ma vorrei utilizzare i parametri derivanti dalla function gotPosition

Vale2 · 12 Set 2012

Ciao,

avevo capito altro problema,

Codice:

navigator.geolocation.getCurrentPosition(gotPosition);

non è definito, deve stare nella function

Codice:

function calcRoute() {

anche

function gotPosition(p)

Prova cosi

Codice:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  
	calcRoute();
	directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = { 
		zoom:7,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	  
	map = new google.maps.Map(document.getElementById("map"), myOptions);    
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("panel"));

	var selectTags = document.getElementsByTagName("select");	
	for(i=0;i<selectTags.length;i++){
		selectTags[i].onchange=function(){ 
			calcRoute();
			};
		}
	}
	
	 function calcRoute() {
		if(!navigator.geolocation) {
        alert("Geolocalizzazione non supportata");
        return false;
        }else{
        navigator.geolocation.getCurrentPosition(gotPosition); 
        return false;
        }
		function gotPosition(p) {
		var outputStr = p.coords.latitude +','+p.coords.longitude;
		var partenza = outputStr;
           alert(partenza);      
		var arrivo = document.getElementById("arrivo").value;
		var request = {
			origin: partenza, 
			destination: arrivo,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
		directionsService.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		  }
		});
  }
  }
window.onload = initialize;
</script>

</head>
<body>
<div>
<script type="text/javascript">
//alert(abcd.eccomi());
</script>

<input id ="partenza" type="hidden" value="<%=request.QueryString("lat")%>,<%=request.QueryString("lon")%>">
<input id ="arrivo" type="hidden" value="Via Zanardelli - Gardone Riviera">

</div>
<div id="map"></div>

<div id="panel"></div> 
</body>

Togli alert(partenza); che ti stampa le coordinate.

Valeria.

Stefano Steve Bigoloni · 13 Set 2012

Perfetto!!!

Ora ho un'altro quesito:

Posso sostituire la mappa di google con quella di openstreetmap mantenendo le peculiarità relative ai percorsi?
Il problema è che nel mio paese Google map è povero di strade, mentre invece openstreetmap è completo.

Io ho trovato questo codice per la mappa, ma integrarlo con il sistema precedente penso sia ben oltre le mie capacità.

Codice:

<html>
    <head>
        <meta charset="utf-8" />
        <title>Simple SlippyMap using Google Maps v3 API</title>
        <style>
            html, body, .slippymap {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            .slippymap {
                width: 99.5%;
                height: 99.5%;
                outline: 1px solid gray;
            }
            header, footer{
                position: fixed;
                left: 0;
                right: 0;
                width: 100%
                margin: 0;
                padding: 0.21em;
                z-index: 2;
                background: #eed;
            }
        </style> 
    </head>
    <body>
        <div id="map" class="slippymap" style="float: left;"></div>

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var element = document.getElementById("map");
 
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(57, 21),
                zoom: 3,
                mapTypeId: "OSM",
                mapTypeControlOptions: {
                    mapTypeIds: ["OSM"]
                }
            });
 
            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        </script>
    </body>
</html>

Cerca

Cerca

dove sbaglio a richiamare un valore?

Stefano Steve Bigoloni

Nuovo Utente

Vale2

Utente Attivo

Stefano Steve Bigoloni

Nuovo Utente

Vale2

Utente Attivo

Stefano Steve Bigoloni

Nuovo Utente

Discussioni simili