I'm using Google Maps Geocoder to grab the latitude and longitude of an address. I'm then taking that address and using Leaflet and panning the map to the latitude + longitude coordinates. However, I'm receiving an error from Firebug saying Error: Invalid LatLng object: (-33.8674869, 151.20699020000006, undefined). I know my variable geolocation returns -33.8674869, 151.20699020000006 but not the undefined. What's causing the problem?
<body onload="initialize()">
<div id="result"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([33.7489954, -84.3879824], 13);
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var geolocation = String(results[0].geometry.location);
var geolocation = geolocation.replace('(','');
var geolocation = geolocation.replace(')','');
map.panTo([geolocation]);
} else {
$('#result').html('Geocode was not successful for the following reason: ' + status);
}
});
};
L.tileLayer('http://{s}.tile.cloudmade/apikeyputhere/997/256/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
</script>
I'm using Google Maps Geocoder to grab the latitude and longitude of an address. I'm then taking that address and using Leaflet and panning the map to the latitude + longitude coordinates. However, I'm receiving an error from Firebug saying Error: Invalid LatLng object: (-33.8674869, 151.20699020000006, undefined). I know my variable geolocation returns -33.8674869, 151.20699020000006 but not the undefined. What's causing the problem?
<body onload="initialize()">
<div id="result"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([33.7489954, -84.3879824], 13);
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var geolocation = String(results[0].geometry.location);
var geolocation = geolocation.replace('(','');
var geolocation = geolocation.replace(')','');
map.panTo([geolocation]);
} else {
$('#result').html('Geocode was not successful for the following reason: ' + status);
}
});
};
L.tileLayer('http://{s}.tile.cloudmade./apikeyputhere/997/256/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
</script>
1 Answer
Reset to default 5Replace this:
var geolocation = String(results[0].geometry.location);
var geolocation = geolocation.replace('(','');
var geolocation = geolocation.replace(')','');
map.panTo([geolocation]);
with that:
map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);
Explanation:
You assign a string to the first array-value, it's the same as:
geolocation=new Array('-33.8674869, 151.20699020000006')//contains 1 string
The string will not be evaluated, it will remain 1 string, but you need an array with 2 floats:
geolocation=new Array(-33.8674869, 151.20699020000006)//contains 2 floats
The undefined is the missing 2nd item of the array provided to panTo()
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745365330a4624550.html
评论列表（0条）