Как сделать так, чтобы на карте Google отображалось текущее местоположение на iOS5 и Opera Mobile?
Я потратил довольно много времени на чтение об использовании API Google Maps и собрал код ниже. Код сначала центрируется на определенном месте, а затем меняет центр карты на текущее местоположение пользователя, которое выделяется вторым маркером. Затем он обновляет положение второго маркера с интервалами 5 с, не перецентрируя карту. Это работает в разной степени на разных устройствах и в браузерах, и мне было интересно, как сделать его более совместимым с несколькими устройствами.
======================================================================================================================
Device Browser Display map Display map marker Display current location
======================================================================================================================
PC Chrome Yes Yes Yes (if allowed)
----------------------------------------------------------------------------------------------------------------------
iPhone 3 iOS 5 Yes Yes No
----------------------------------------------------------------------------------------------------------------------
Nokia n97 Opera Mobile Yes Yes Yes
----------------------------------------------------------------------------------------------------------------------
Nokia n97 Native symbian browser Yes, though hybrid map is poor No It detects the current location and centres the map there, but doesn't display the image.
----------------------------------------------------------------------------------------------------------------------
Мне нужно разместить карту на моем собственном сайте, чтобы убедиться, что она отображается правильно с моими пользовательскими значками и т. Д.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>mysite - Find your way :)</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
var map;
var current_location;
var clue_location;
function initialize()
{
var lostLatLong = new google.maps.LatLng(51.1,-0.1);
var mapOptions = {
zoom: 19,
center: lostLatLong,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false,
rotateControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var image = '/static/images/maps_images/mysite-map-icon-48x48.png';
clue_location = new google.maps.Marker({
position: lostLatLong,
map: map,
icon: image
});
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position)
{
var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
current_location = new google.maps.Marker({
position: newPos,
map: map,
icon: current_location_image,
});
map.setCenter(newPos);
});
setTimeout(autoUpdateLocation, 5000);
}
}
function autoUpdateLocation()
{
navigator.geolocation.getCurrentPosition(function(position)
{
current_location.setMap(null);
var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
current_location = new google.maps.Marker({
position: newPos,
map: map,
icon: current_location_image,
});
});
setTimeout(autoUpdateLocation, 5000);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
1 ответ
Мне кажется, ваш код работает в Opera Mobile 12.1 на Android. Тем не менее, есть несколько вещей, которые могут вызывать проблемы в некоторых случаях, например, есть два случая setTimeout работает в то же время делает по существу то же самое. Это также идет вразрез с идеалом повторного использования кода в максимально возможной степени, поэтому я постарался упростить ваш код здесь:
function initialize() {
var isFirstTime = true;
var lostLatLong = new google.maps.LatLng(51.1, -0.1);
var mapOptions = {
zoom: 19,
center: lostLatLong,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false,
rotateControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var image = '/static/images/maps_images/mysite-map-icon-48x48.png';
var clue_location = new google.maps.Marker({
position: lostLatLong,
map: map,
icon: image
});
function autoUpdateLocation() {
navigator.geolocation.getCurrentPosition(function(position) {
// Remove marker if necessary
if (!isFirstTime && current_location) {
current_location.setMap(null);
}
// Get new location
var current_location_image = '/static/images/maps_images/mysite_location-marker-64x64.png';
var newPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var current_location = new google.maps.Marker({
position: newPos,
map: map,
icon: current_location_image
});
// Set centre first time only
if (isFirstTime && map) {
map.setCenter(newPos);
isFirstTime = false;
}
});
}
if (navigator.geolocation) {
setInterval(autoUpdateLocation, 5000);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Другие заметки:
Я заменил
setTimeoutсsetIntervalчто больше подходит для повторных задач.Поместите все в
initialize()функция, чтобы держать вещи вне глобального пространства имен.Удалены запятые на последнем элементе объекта.
current_locationпеременная не должна быть объявлена внеautoUpdateLocation()функция.
Вероятно, это может быть улучшено дальше, но это должно быть немного более надежным. Дайте мне знать, если у вас все еще есть проблемы.