use*_*852 5 cross-browser mobile-safari opera-mobile google-maps-api-3
我花了很多时间阅读有关使用谷歌地图api并将下面的代码放在一起的消息.代码首先以特定位置为中心,然后将地图中心更改为用户当前位置 - 使用第二个标记突出显示该位置.然后以5s的间隔刷新第二个标记的位置,而不重新定位地图.这在不同的设备和浏览器上有不同的作用,我想知道如何使它更具跨设备兼容性.
======================================================================================================================
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>
您的代码似乎适用于 Android 上的 Opera Mobile 12.1。但是，在某些情况下，有一些事情可能会导致问题，例如，有两个实例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()函数外部声明。
它可能可以进一步改进，但这应该更强大一些。如果您仍然遇到问题，请告诉我。
| 归档时间： |
|
| 查看次数： |
1045 次 |
| 最近记录： |