Google Maps Geocode显示错误的地址 [英] Google Maps Geocode Showing Wrong Address
问题描述
我的位置存储在数据库中，我正在遍历它们，并在Google Maps(API v3)上为每个位置(JS和Razor的混合)放下标记.
I have locations stored within a database, and I am looping through them and putting markers down for each location (mix of JS and Razor) on Google Maps (API v3).
我正在使用的代码来自几天前在StackOverFlow上的一个问题.有问题的两个地址是:
The code I am using is from a question I asked a couple of days ago on StackOverFlow. The two addresses in question are:
- 英国1SA，PE11，Spalding，6-7 Hall Place
- 英国伯明翰B2 4LR，联合大街29号
这些地址在此处完美显示.但是，当我在自己的站点(当前为本地主机)上尝试使用它们时，一个出现在旧金山，另一个出现在美国路易斯安那州！
These addresses show perfectly on here. But when I try them on my site (localhost currently), one shows up in San Francisco and the other in Louisiana USA !!
这是我正在使用的JavaScript代码(请注意，混入了一些C#/Razor):
Here is the JavaScript code I'm using (note, some C#/Razor mixed in):
<script type="text/javascript">
// Get the map container node.
var mapContainer = $("#myMap");
var geocoder = new google.maps.Geocoder();
// Create the new Goole map controller using our
// map (pass in the actual DOM object). Center it
// above the first Geolocated IP address.
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 11,
center: new google.maps.LatLng(
51.51121,
-0.11982
),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
// I add a marker to the map using the given latitude
// and longitude location.
function addMarker(latitude, longitude, label) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
// Create our "tiny" marker icon
var iconImage = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
// Create the marker - this will automatically place it
// on the existing Google map (that we pass-in).
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
title: (label || ""),
icon: iconImage,
center: myLatlng,
zoom: 10
});
// Return the new marker reference.
return(marker);
}
// I update the marker's position and label.
function updateMarker( marker, latitude, longitude, label ){
// Update the position.
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
// Update the title if it was provided.
if (label){
marker.setTitle( label );
}
}
function placeMarkerForAddress(address, city, postcode, country) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: address + ', ' + city + ', ' + postcode + ', ' + country
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
//now add markers
@foreach (var item in Model.Events) {
@:placeMarkerForAddress('@item.Location.Address', '@item.Location.City', '@item.Location.PostCode', 'UK');
@:console.log('boo!');
}
// -------------------------------------------------- //
// -------------------------------------------------- //
// -------------------------------------------------- //
// -------------------------------------------------- //
// Check to see if this browser supports geolocation.
if (navigator.geolocation) {
// This is the location marker that we will be using
// on the map. Let's store a reference to it here so
// that it can be updated in several places.
var locationMarker = null;
// Get the location of the user's browser using the
// native geolocation service. When we invoke this method
// only the first callback is requied. The second
// callback - the error handler - and the third
// argument - our configuration options - are optional.
navigator.geolocation.getCurrentPosition(
function (position) {
// Check to see if there is already a location.
// There is a bug in FireFox where this gets
// invoked more than once with a cahced result.
if (locationMarker) {
return;
}
// Log that this is the initial position.
console.log("Initial Position Found");
// Add a marker to the map using the position.
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function (error) {
console.log("Something went wrong: ", error);
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
// Now tha twe have asked for the position of the user,
// let's watch the position to see if it updates. This
// can happen if the user physically moves, of if more
// accurate location information has been found (ex.
// GPS vs. IP address).
//
// NOTE: This acts much like the native setInterval(),
// invoking the given callback a number of times to
// monitor the position. As such, it returns a "timer ID"
// that can be used to later stop the monitoring.
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
// Log that a newer, perhaps more accurate
// position has been found.
console.log("Newer Position Found");
// Set the new position of the existing marker.
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated / Accurate Position"
);
}
);
// If the position hasn't updated within 5 minutes, stop
// monitoring the position for changes.
setTimeout(
function () {
// Clear the position watcher.
navigator.geolocation.clearWatch(positionTimer);
},
(1000 * 60 * 5)
);
}
</script>
我很困惑！我尝试使用FireBug调试JS，但是我认为GeoCode API上必须存在某种超时机制，当我尝试在调试模式下遍历代码时，它会给我错误.另外，我无法确定为什么我的地图没有以用户找到的位置为中心.
I am confused! I tried debugging the JS using FireBug, but I think there must be some sort of time-out mechanism on the GeoCode API, it gives me errors when I try moving through the code in debug mode. Also, I cannot wrap my head around why my map isn't centring around the User's found position.
推荐答案
尝试将完整地址用于您的地理定位器请求，并将区域设置为英国(如果您的所有地址都在英国)，则应该缩小搜索一点
Try using the full address for your geolocator request, and setting the region to UK (if all of your addresses are in the UK), this should narrow down the search a bit
function placeMarkerForAddress(address, city, postcode, country) {
var fullAddress = address + ', ' + city + ', ' + postcode + ', ' + country;
geocoder.geocode( { 'address': fullAddress, 'region':'UK'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: fullAddress
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
获取更新的位置后，您需要将地图居中并移动标记
And when you get the updated position you need to centre the map as well as move the marker
function updateMarker( marker, latitude, longitude, label ){
// Update the position.
var pos=new google.maps.LatLng(latitude,longitude);
// move the marker
marker.setPosition(pos);
// centre the map
marker.getMap().setCenter(pos);
// Update the title if it was provided.
if (label){
marker.setTitle( label );
}
}
这篇关于Google Maps Geocode显示错误的地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
