我的谷歌地图 javascript 代码显示在桌面浏览器上，但不是我的手机浏览器答案

【问题标题】：My Google Map javascript code displays on desktop browser but not my mobile phone browser我的谷歌地图 javascript 代码显示在桌面浏览器上，但不是我的手机浏览器
【发布时间】：2013-12-31 12:21:16
【问题描述】：

好的，我已经查过了，只找到了一页。

(Google Maps API GeoLocation not working for mobile)

我的问题是我有一些调用谷歌地图 API 的 javascript 代码，当我使用桌面上的浏览器查看它时显示得很好，我使用的浏览器是谷歌浏览器，但是当我尝试查看它使用我的android手机根本不显示。我不确定问题是什么，我运行了几天，但地图崩溃并停止显示。从那以后，我不得不重新编写代码以使其再次显示。我终于让它工作了，但现在我遇到了这个新问题。这是我正在使用的代码。

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="Stylesheet" type="text/css" href="css/drop.css" />
        <link rel="Stylesheet" type="text/css" href="css/login.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?   sensor=false"></script>
        <script type="text/javascript">
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(getMap, showError);
                }
                else {
                   alert("Geolocation is not supported by this browser.");
                }
            }

           function initialize( lat, lon ) {
               pLatitude = lat;
               pLongitutde = lon;

           var mapOptions = {
              center: new google.maps.LatLng(lat, lon),
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: true
           }

           var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
           var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lon),
              map: map,
              title: "Current Location"
           });
        }

        function getMap(position) {
             lat = position.coords.latitude;
             lon = position.coords.longitude;

             google.maps.event.addDomListener(window, 'load', initialize(lat, lon));
        }

        function showError(error) {
             switch (error.code) {
                 case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unkown error occurred.");
                    break;
        }
    }
</script>
</head>
<body onload="getLocation()">
   <div id="map-canvas"></div>
</body>
</html>

【问题讨论】：

是否还有其他代码未包含在内？比如getMap()和getLocation()什么时候调用？此外，您正在调用initialize()，而您应该将其作为回调传递给google.maps.event.addDomListener。
我将尝试添加我所有的代码。我上次运气不太好。
Kai 我仍然不确定你的意思是我在哪里调用 initialize() 而不是将它作为回调传递给 addDomListener。
见下面的答案，加上链接

标签： javascript google-maps-api-3

【解决方案1】：

你犯了一些错误。我更新了您的代码并添加了 cmets 以获得解释：http://jsfiddle.net/cj5xF/1/

还有全屏视图（手机测试）：http://jsfiddle.net/cj5xF/1/embedded/result/

来自固定代码的片段：

    // When the page has loaded, call the getLocation function.
    // Be sure not to use parenthesis after getLocation, or you will
    // call it, instead of passing a reference to it to be called later (callback)
    google.maps.event.addDomListener(window, 'load', getLocation);

这将在页面加载后调用getLocation 函数。 getLocation 函数将执行其地理位置检查，如果可用，调用 initialize 并将包含坐标的 position 对象传递给它。然后initialize 将使用这些坐标创建谷歌地图。

【讨论】：

您好，感谢您的帮助。这使我的代码更好，并且设置更正确。现在唯一的问题是地图仍然无法加载到我的手机上，但对其他人来说加载正常。现在我只需要弄清楚我的手机出了什么问题。哦，我什至无法查看您为我提供的工作代码全屏视图的链接。我的手机是问题。
嘿凯感谢一堆帮助。我终于让我的地图显示在手机的浏览器上。在与它战斗了一段时间后，设置和什么都没有，最终修复它的是重新启动手机。一定要热爱技术。
太棒了，很高兴我能帮上忙！