Google maps api 3 如何在iOS5和Opera Mobile上制作谷歌地图显示当前位置？_Google Maps Api 3_Cross Browser_Mobile Safari_Opera Mobile

Google maps api 3 如何在iOS5和Opera Mobile上制作谷歌地图显示当前位置？

google-maps-api-3

Google maps api 3 如何在iOS5和Opera Mobile上制作谷歌地图显示当前位置？,google-maps-api-3,cross-browser,mobile-safari,opera-mobile,Google Maps Api 3,Cross Browser,Mobile Safari,Opera Mobile,我花了相当多的时间阅读有关使用GoogleMapsAPI的内容，并整理了下面的代码。代码首先以特定位置为中心，然后将地图的中心更改为用户当前位置，并用第二个标记突出显示该位置。然后，它每隔5秒刷新第二个标记的位置，而无需重新调整地图的中心。这在不同的设备和浏览器上有不同的效果，我想知道如何使它更具跨设备兼容性 ==============================================================================================

我花了相当多的时间阅读有关使用GoogleMapsAPI的内容，并整理了下面的代码。代码首先以特定位置为中心，然后将地图的中心更改为用户当前位置，并用第二个标记突出显示该位置。然后，它每隔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>


mysite-找到你的路：）
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}
@媒体印刷品{
html，正文{
高度：自动；
}
#地图画布{
高度：650px；
}
}
var映射；
var当前位置；
var-u位置；
函数初始化（）
{
var lostLatLong=新的google.maps.LatLng（51.1，-0.1）；
变量映射选项={
缩放：19，
中心：lostLatLong，
mapTypeId:google.maps.mapTypeId.HYBRID，
街景控制：错误，
旋转控制：错误，
动物控制：对，
ZoomControl选项：{
样式：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({
位置：lostLatLong，
地图：地图，
图标：图像
});
if（导航器.地理位置）
{
navigator.geolocation.getCurrentPosition（函数（位置）
{
var current_location_image='/static/images/maps_images/mysite_location-marker-64x64.png'；
var newPos=newgoogle.maps.LatLng（position.coords.latitude，position.coords.longitude）；
当前位置=新的google.maps.Marker({
职位：newPos，
地图：地图，
图标：当前位置图像，
});
地图设置中心（newPos）；
});
设置超时（自动更新位置，5000）；
}
}
函数autoUpdateLocation（）
{
navigator.geolocation.getCurrentPosition（函数（位置）
{
当前_位置.setMap（空）；
var current_location_image='/static/images/maps_images/mysite_location-marker-64x64.png'；
var newPos=newgoogle.maps.LatLng（position.coords.latitude，position.coords.longitude）；
当前位置=新的google.maps.Marker({
职位：newPos，
地图：地图，
图标：当前位置图像，
});
});
设置超时（自动更新位置，5000）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

在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（）

函数之外声明

它可能会得到进一步的改进，但这应该更加健壮。如果您仍然有问题，请告诉我。

我没有iPhone或诺基亚n97，因此无法测试，但我建议您使用CSS。尝试删除所有内容，只为地图容器设置一个固定的宽度和高度。您的问题需要重新编写，因为它没有明确询问要实现什么，而不是当前的行为。“使地图更具跨浏览器兼容性”有多种解决方案。你有75个观点，没有答案。首先尝试一个特定于设备/浏览器的问题？RoManiac，感谢您的反馈。我对标题和标签进行了编辑，使其更加具体。tagawa，感谢您的回复。我已经尝试了代码，但它并没有成功——刷新后“当前位置”标记仍然存在，并且最终会出现一堆标记，显示10秒前的位置。