设置:我有一个地图有一个标记和一组输入字段。 map/init fn在窗口加载时运行。谷歌地理编码 - 功能不起作用
什么工作:反地理编码:我拖累&串门的标记和输入字段(街道,NR,邮政编码,城市,国家)通过mb_map.geocodePosition()
功能更新。
任务:现在我想使用相同的输入字段添加正常的地理编码(地址> latLng)来设置地址并移动标记。调用正常地理编码的功能由按钮onClick="mb_map.encodeAddress()"
事件触发。
问题:由于某种原因,函数没有得到任何参数,console.log()
什么也没有返回。而是重新加载页面。我在下面的代码中写了一条评论,以帮助您更轻松地找到停止工作的部分。
<script type="text/javascript">
/**
* Global public map object & functions
* @since 0.1
*/
var mb_map = {
map: null,
marker: null,
geocoder: new google.maps.Geocoder(),
lat: null,
lng: null,
input:
{
street: document.getElementById('location_street')
,nr: document.getElementById('location_nr')
,zip: document.getElementById('location_zip')
,city: document.getElementById('location_city')
,country: document.getElementById('location_country')
,lat: document.getElementById('location_lat')
,lng: document.getElementById('location_lng')
},
/**
* Reverse Geocoding
* lat/lng > Address
*
* @param pos
* @returns (object) | Geocoded address data
*/
geocodePosition: function(pos)
{
mb_map.geocoder.geocode(
{
latLng: pos
}
,function (responses)
{
if (responses && responses.length > 0)
{
// THIS WORKS PERFECT
console.log(responses[0]);
mb_map.updateMarkerAddress(responses[0]);
}
else
{
mb_map.updateMarkerAddress('Cannot determine address at this location.');
}
});
},
/**
* Geocoding
* Address > lat/lng
*/
encodeAddress: function()
{
var address_formated =
mb_map.input.street.value
+ " "
+ mb_map.input.nr.value
+ ", "
+ mb_map.input.zip.value
+ ", "
+ mb_map.input.city.value
+ ", "
+ mb_map.input.country.value;
mb_map.geocoder.geocode(
{
// address: address_formated
// FOLLOWING LINE IS ONLY HERE, TO GET AN EASIER EXAMPLE
address: 'Lisbon, PT'
}
,function(responses, status)
{
// THIS IS WHERE NOTHING WORKS
console.log(responses);
if (status == google.maps.GeocoderStatus.OK)
{
mb_map.map.setCenter(responses[0].geometry.location);
mb_map.updateMarkerAddress(responses[0].geometry.location);
mb_map.marker = new google.maps.Marker(
{
map: mb_map.map
,position: responses[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
},
/**
* Update input fields on marker drop
*
* @param str
* @returns void
*/
updateMarkerAddress: function(str)
{
// not shown as not relevant
},
/**
* Setup map & marker
*
* @constructor
*/
init: function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function (position)
{
mb_map.lat = position.coords.latitude;
mb_map.lng = position.coords.longitude;
var latLng = new google.maps.LatLng(mb_map.lat, mb_map.lng);
mb_map.map = new google.maps.Map(document.getElementById('map-container'),
{
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
mb_map.marker = new google.maps.Marker(
{
position: latLng,
title: 'Location',
map: mb_map.map,
draggable: true
});
// Update current position info.
mb_map.geocodePosition(latLng);
});
}
}
};
/**
* INIT on window load
*/
google.maps.event.addDomListener(window, 'load', mb_map.init);
</script>
谢谢!
编辑:按照评论,这里是我的标记:
<div id="map-container" style="min-width: 235px; height: 300px;">loading...</div>
<input type="submit" name="encode" id="encode" class="button-primary" value="Encode" onclick="mb_map.encodeAddress()">
什么是你的HTML的样子?另外我没有看到需要使用jQuery标签,因为您没有使用它。 – omarello
我在Q的末尾添加了标记。)jQuery是默认的,所以我不在乎(但是从简单的看,我找不到任何东西 - 你能指出它吗?Ty)。 – kaiser