我有存储在数据库中的位置,我正在遍历它们并在谷歌地图(API v3)上为每个位置(JS 和 Razor 的混合)放置标记。
我使用的代码来自我几天前在 StackOverFlow 上提出的一个问题。有问题的两个地址是:
- 6-7 Hall Place, Spalding, PE11, 1SA, UK
- 29 Union Street, 伯明翰, B2 4LR, UK
这些地址在这里完美显示。但是当我在我的网站(目前是本地主机)上尝试它们时,一个出现在旧金山,另一个出现在美国路易斯安那州!
这是我正在使用的 JavaScript 代码(注意,混合了一些 C#/Razor):
<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 上必须有某种超时机制,当我尝试在调试模式下移动代码时它会给我错误。此外,我无法理解为什么我的地图没有以用户找到的位置为中心。