webForumDet fria alternativet

Google maps funktion för att returnera koordinater

JavaScript

12 svar · 1 953 visningar · startad av Mattias Nordin

Medlem sedan dec. 20051 056 inlägg
Frågan#1

Har hittat följande sida som visar koordinater från en adress. Har försökt att göra en funktion av detta skript som enbart returnerar X & Y med en adress som input men det vill sig inte. Någon wiz där ute som kan få till det?

http://gmaps-samples.googlecode.com/svn/trunk/geocoder/singlegeocode.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"/>
<title>Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(60.472024, 8.468946); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

	alert("Code address ="  +funReturnCoordFromAddress('Norway'))
} 

 
var geocoder; 
function funReturnCoordFromAddress(iSearchString) { 

	var address 
    //var address = document.getElementById("address").value; 
	address = iSearchString

	if (geocoder) { 
	
		geocoder.geocode( 
			{'address': address}, function(results, status){ 
			if (status == google.maps.GeocoderStatus.OK) { 
				
				map.setCenter(results[0].geometry.location); 
				
				var marker = new google.maps.Marker({ 
					map: map,  
					position: results[0].geometry.location 
				}); 
			
				document.getElementById("target").value = results[0].geometry.location
				alert("Return this " +results[0].geometry.location)
				return results[0].geometry.location
	
			}else{ 
				
				alert("Geocode was not successful for the following reason: " + status); 
			
			} 
		}); 
    } 

} 

</script>
 
<body onload="initialize();"> 

	<div id="map_canvas" style="width: 320px; height: 480px;"></div> 

    <!input id="address" type="textbox" value="Sydney, NSW"> 
	<input id="target" type="textbox" value="">
    <!input type="button" value="Encode" onclick="codeAddress()"> 

</body>
Medlem sedan juni 20019 519 inlägg
#2

results[0].geometry.location har två propertys som du kan kolla på:

results[0].geometry.location.b;

och

results[0].geometry.location.c;

enligt firebug.

redigerad: missförstod frågan ;) förlåt

Edit #2:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(60.472024, 8.468946); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

} 

function codeAddress() {
	var searchText = document.getElementById("target").value;
	funReturnCoordFromAddress(searchText);
}
 
var geocoder; 
function funReturnCoordFromAddress(address) { 
	if (geocoder) { 
		geocoder.geocode( 
			{'address': address}, function(results, status){ 
			if (status == google.maps.GeocoderStatus.OK) { 
				
				map.setCenter(results[0].geometry.location); 
				
				var marker = new google.maps.Marker({ 
					map: map,  
					position: results[0].geometry.location 
				}); 
			
				document.getElementById("target").value = results[0].geometry.location
				return results[0].geometry.location
	
			}else{ 
				alert("Geocode was not successful for the following reason: " + status); 
			} 
		}); 
    } 

} 

</script>
 
<body onload="initialize();"> 

	<div id="map_canvas" style="width: 320px; height: 480px;"></div> 

	<input id="target" type="textbox" value="Stockholm, Sweden">
    <input type="button" value="Encode" onclick="codeAddress()"> 

</body>

den hämtar texten ifrån #target när du trycker på knappen

Medlem sedan dec. 20051 056 inlägg
#3

Hej =)

Att sätta ut nya flaggor går bra men att returnera koordinaten får jag inte till. Förstår inte koden till hundra om jag ska vara ärlig.

Alerten inuti funktionen returnerar rätt värde men den första alerten returnerar Undefined.

Det borde väl gå att få ut det första alert värdet?

SIDAN = http://www.filmsnutt.se/test2.asp

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(60.472024, 8.468946); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

	[FONT="Arial Black"]alert(funReturnCoordFromAddress("Stockholm"))[/FONT]
} 

var geocoder; 
function funReturnCoordFromAddress(address) { 
	if (geocoder) { 
		geocoder.geocode( 
			{'address': address}, function(results, status){ 
			if (status == google.maps.GeocoderStatus.OK) { 
				
				map.setCenter(results[0].geometry.location); 
				
				var marker = new google.maps.Marker({ 
					map: map,  
					position: results[0].geometry.location 
				}); 
			
				
				[FONT="Arial Black"]alert(results[0].geometry.location)[/FONT]				
				document.getElementById("target").value = results[0].geometry.location
				return results[0].geometry.location
	
			}else{ 
				alert("Geocode was not successful for the following reason: " + status); 
			} 
		}); 
    } 

} 

</script>

 
<body onload="initialize();"> 

	<div id="map_canvas" style="width: 320px; height: 480px;"></div> 

	<input id="target" type="textbox" value="Stockholm, Sweden">
    <input type="button" value="Encode" onclick="codeAddress()"> 

</body>
Medlem sedan juni 20019 519 inlägg
#4

results[0].geometry.location som din funktion retunera har två propertys en b och en c som retunera koordinaterna till dig.

Medlem sedan dec. 20051 056 inlägg
#5

Förstår inte riktigt. Nedan returnerar rätt...

alert(results[0].geometry.location)

men den andra alerten returnerar undefined. Funktionen verkar exekveras i en lustig ordning också.

alert(funReturnCoordFromAddress("Stockholm"))

Märkligt. Det jag försöker åstakomma är att alert(funReturnCoordFromAddress("Stockholm")) ska returnera (60.4545454, 8.453353).

Förvirrad...

Medlem sedan juni 20019 519 inlägg
#6

funReturnCoordFromAddress sker inte direkt, det kan ta ett tag innan du få en response:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map, geocoder; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(60.472024, 8.468946); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function findLocation() {
	var searchText = document.getElementById("target").value;
	var re = funReturnCoordFromAddress(searchText, successFind);
}

function successFind(location) {
	var l = location.geometry.location;
	map.setCenter(l); 

	var marker = new google.maps.Marker({ 
		map: map,  
		position: l
	}); 
				
	document.getElementById("x").value = l.b;
	document.getElementById("y").value = l.c;
}

function funReturnCoordFromAddress(address, fn) { 
	if (geocoder) { 
		geocoder.geocode( 
			{'address': address}, function(results, status){ 
			if (status == google.maps.GeocoderStatus.OK) {
				fn(results[0]);
			}else{ 
				alert("Geocode was not successful for the following reason: " + status); 
			} 
		}); 
    } 

} 

</script>
 
<body onload="initialize();"> 

	<div id="map_canvas" style="width: 320px; height: 480px;"></div> 

	<input id="target" type="textbox" value="">
	<input type="text" id="x" />
	<input type="text" id="y" />
    <input type="button" value="Encode" onclick="findLocation()"> 

</body>

hoppas du förstå mer av denna kod, tagit bort mycket och skapat en funktion som man ta med i funReturnCoordFromAddress som man vill köra OM det bli en matchning av kartan.

Medlem sedan dec. 20051 056 inlägg
#7

Har en annan sida som jag labbar med som gör nästan samma sak: http://www.filmsnutt.se/test3.asp


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Example</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(60.472024, 8.468946); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

	alert("4) Run function and return value = " +funReturnCoordFromAddress('Norway'))
	//funReturnCoordFromAddress('Finland')
	
} 

 
var geocoder; 
function funReturnCoordFromAddress(iSearchString) { 
	alert("1) Inside function...")
	var address 
	var varReturnThisValue
    
	//var address = document.getElementById("address").value; 
	address = iSearchString

	if (geocoder) { 
	
		geocoder.geocode( 
			{'address': address}, function(results, status){ 
			if (status == google.maps.GeocoderStatus.OK) { 
				
	
			
				//document.getElementById("target").value = results[0].geometry.location
				varReturnThisValue = results[0].geometry.location
				alert("2) Return this value " +varReturnThisValue)
				//return results[0].geometry.location
	
			}else{ 
				
				alert("Geocode was not successful for the following reason: " + status); 
			
			} 
		}); 

    }else{

	alert("not true")

	} 

alert("3) return varReturnThisValue = " +varReturnThisValue)
return varReturnThisValue 

} 
</script>
 
 
 
 
<body onload="initialize();"> 

	<div id="map_canvas" style="width: 320px; height: 480px;"></div> 

    <!input id="address" type="textbox" value="Sydney, NSW"> 
	<input id="target" type="textbox" value="">
    <!input type="button" value="Encode" onclick="codeAddress()"> 

</body>

Kör man sidan så får jag följande output:

  1. Inside function...

  2. return varReturnThisValue = undefined

  3. run function and return value = undefined

  4. Return this value (60.472024, 8.468946)

Hur kan det komma sig att "2 Return this value (60.472024, 8.468946)" körs efter "4) run function and return value = undefined"

och hur kan det komma sig att "4) run function and return value = undefined" = undefined?

Hmmm...

Medlem sedan dec. 20051 056 inlägg
#8

Ahhh... ska testa din kod.

Medlem sedan juni 20019 519 inlägg
#9

För anropet till google görs Asynchronous (är i princip som ett AJAX anrop), datan körs först när den den fått ett resultat.

Medlem sedan dec. 20051 056 inlägg
#10

Anledningen till att jag skull vilja ha en funktion som returnerade koordinaterna är att kunna få kartan mer dynamisk. Jag vill tex att default zoom och position ska vara på ett specifikt land beroende på parametrar från en databas.

var map, geocoder; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng( [B][I]funReturnCoordFromAddress(<%=Russia%>) [/I][/B]); 

    var myOptions = { 
      zoom: 4, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
}

Att behöva känna till alla koordinater statiskt känns bakvänt.

:stud

Medlem sedan juni 20019 519 inlägg
#11

kör samma kod:

function initialize() { 
    geocoder = new google.maps.Geocoder(); 

    var myOptions = { 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	funReturnCoordFromAddress("Stockholm, Sweden", center); //change Stockholm, Sweden to whatever you want to center by default.
}

Och infoga koden för funktionen center:

function center(location) {
	map.setCenter(location.geometry.location);
}

Så länge du inte sparar ner kordinaterna i en databas eller liknande så måste du hitta kordinaterna, så det kan bli lite fördröjning där.

Medlem sedan dec. 20051 056 inlägg
#12

Tackar för snabbkursen. Uppskattas =)

Börjar förstå konceptet lite mer nu tror jag ;)

Medlem sedan juni 20019 519 inlägg
#13
...
var latlng = new google.maps.LatLng( funReturnCoordFromAddress(<%=Russia%>) ); 
...

Notera att Russia måste se ut som en sträng (javascript sträng) eller koordinater

270 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)