我的Google地图JavaScript代码显示在桌面浏览器上，但不显示我的手机浏览器 [英] My Google Map javascript code displays on desktop browser but not my mobile phone browser
问题描述
好的，所以我已经查看了这个，并且只找到了一个页面。
（ Google Maps API GeoLocation不适用于手机）我的问题是我有一些JavaScript代码，调用谷歌地图API，并显示得很好，当我在我的桌面上使用我的浏览器查看它时，我使用的浏览器是谷歌浏览器，但是当我尝试使用我的Android手机查看它时根本不显示。我不确定是什么问题，我已经运行了几天，但地图崩溃并停止显示。从那以后我不得不重新做代码才能让它再次显示。我终于搞定了，但现在我有了这个新问题。这是我正在使用的代码。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< link rel =Stylesheettype =text / csshref =css / drop.css/>
< link rel =Stylesheettype =text / csshref =css / login.css/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js？sensor = false>< / script>
< script type =text / javascript>
函数getLocation（）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（getMap，showError）;
}
else {
alert（此浏览器不支持地理定位。）;
函数初始化（lat，lon）{
pLitude = 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：当前位置
}）;
}
函数getMap（位置）{
lat = position.coords.latitude;
lon = position.coords.longitude;
google.maps.event.addDomListener（window，'load'，initialize（lat，lon））;
函数showError（错误）{
switch（error.code）{
case error.PERMISSION_DENIED：
alert（用户拒绝了请求地理定位。）;
休息;
case error.POSITION_UNAVAILABLE：
alert（位置信息不可用。）;
休息;
case error.TIMEOUT：
alert（请求获取用户位置超时。）;
休息;
case error.UNKNOWN_ERROR：
alert（发生未知错误。）;
休息;
}
}
< / script>
< / head>
< body onload =getLocation（）>
< div id =map-canvas>< / div>
< / body>
< / html>
您犯了一些错误。我更新了您的代码并添加了注释以供解释： http://jsfiddle.net/cj5xF/1/ b
$ b
还有一个全屏视图（移动测试）： http://jsfiddle.net/cj5xF/1/embedded/result/
固定代码片段：
//当页面加载时，调用getLocation函数。
//请务必在getLocation之后不要使用圆括号，否则您将
//调用它，而不是传递对它的引用以稍后调用（回调函数）
google.maps.event .addDomListener（window，'load'，getLocation）;
这会调用 getLocation 页面已加载。 getLocation 函数将执行其地理位置检查，如果可用，请调用 initialize 并将位置对象，其中包含坐标。 initialize 然后将使用这些坐标来创建谷歌地图。
Okay, so I already looked this up and only found one page on it.
(Google Maps API GeoLocation not working for mobile)
My issue is that that I have some javascript code that calls the google maps API and displays just fine when I view it using my browser on my desktop, the browser I'm using is google chrome, but when I try to view it using my android phone it doesn't display at all. I am not sure what the issue is, I had it running a couple of days, but the map crashed and stopped displaying. Since then i have had to re-do the code to get it to display again. I finally got it working, but now I have this new problem. Here is the code I'm using.
<!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>
You made a few mistakes. I updated your code and added comments for an explanation: http://jsfiddle.net/cj5xF/1/
There's also a fullscreen view (test on mobile): http://jsfiddle.net/cj5xF/1/embedded/result/
Snippet from the fixed code:
// 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);
This will call the getLocation function when the page has loaded. The getLocation function will perform its geolocation checks, and if available, call initialize and pass into it the position object, which contains coordinates. initialize will then use those coords to create a google map.
这篇关于我的Google地图JavaScript代码显示在桌面浏览器上，但不显示我的手机浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
