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

我的谷歌地图javascript代码显示在桌面浏览器上,但不显示在手机浏览器上,javascript,google-maps-api-3,Javascript,Google Maps Api 3,好的,我已经查过了,只找到了一页 () 我的问题是,我有一些javascript代码调用google maps API,当我在桌面上使用浏览器查看时,它显示得很好,我使用的浏览器是google chrome,但当我尝试使用android手机查看时,它根本不显示。我不确定问题是什么,我让它运行了几天,但地图崩溃并停止显示。从那以后,我不得不重新编写代码,让它再次显示。我终于让它工作了,但现在我有了这个新问题。这是我正在使用的代码 <!DOCTYPE html> <

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

()

我的问题是,我有一些javascript代码调用google maps API,当我在桌面上使用浏览器查看时,它显示得很好,我使用的浏览器是google chrome,但当我尝试使用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>

函数getLocation(){
if(导航器.地理位置){
navigator.geolocation.getCurrentPosition(getMap,RoR);
}
否则{
警报(“此浏览器不支持地理位置”);
}
}
函数初始化(横向、纵向){
陈词滥调=拉丁语;
plongitude=lon;
变量映射选项={
中心:新google.maps.LatLng(lat,lon),
缩放:14,
mapTypeId:google.maps.mapTypeId.ROADMAP,
mapTypeControl:true
}
var map=new google.maps.map(document.getElementById(“地图画布”),mapOptions);
var marker=new google.maps.marker({
位置:新google.maps.LatLng(lat,lon),
地图:地图,
标题:“当前位置”
});
}
函数getMap(位置){
纬度=位置坐标纬度;
lon=位置坐标经度;
google.maps.event.addDomListener(窗口'load',初始化(lat,lon));
}
功能错误(错误){
开关(错误代码){
案例错误。权限被拒绝:
警报(“用户拒绝了地理定位请求”);
打破
案例错误。位置不可用:
警报(“位置信息不可用”);
打破
大小写错误。超时:
警报(“获取用户位置的请求超时”);
打破
案例错误。未知错误:
警报(“发生未知错误”);
打破
}
}

您犯了一些错误。我更新了您的代码并添加了注释以进行解释:

还有一个全屏视图(手机测试):

固定代码中的代码段:

    // 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
对象传递给它<代码>初始化然后将使用这些坐标创建谷歌地图。

是否还有其他代码未包含?例如,何时调用
getMap()
getLocation()
?另外,您正在调用
initialize()
,而您应该将其作为回调传递给
google.maps.event.adddomstener
。我将尝试添加所有代码。上次我运气不太好。Kai我仍然不确定你的意思是我调用initialize()而不是将其作为回调传递给addDomListener。请参阅下面的答案,以及链接。谢谢你的帮助。这使我的代码更好,设置更正确。现在唯一的问题是地图仍然不会加载到我的手机上,但它的加载对其他人来说很好。现在我只需要弄清楚我的手机出了什么问题。哦,我甚至无法查看您为我提供的工作代码全屏视图的链接。我的电话出了问题。嘿,凯,非常感谢你的帮助。我终于在手机浏览器上显示了我的地图。经过一段时间的斗争,设置和什么都没有,最终解决的是重新启动手机。我喜欢科技。太棒了,很高兴我能帮上忙!