谷歌的Javascript地图API加载在Web浏览器而不是Android浏览器 [英] Javascript Google Maps API loading in Web Browser but not Android Browser

问题描述

我无能，为什么不能在我的手机浏览器中运行，但它会在我的电脑浏览器上运行，铬是准确的。

可以在任何你提供反馈意见。

链接到我在测试这个服务器：

  

54.172.35.180/chat/chatlist.php

 ＆LT;脚本类型=文/ JavaScript的＆GT;    函数成功（位置）{      VAR经纬度=新google.maps.LatLng（position.coords.latitude，position.coords.longitude）;
      VAR myOptions = {
        变焦：15，
        中心：经纬度，
      };
      VAR地图=新google.maps.Map（的document.getElementById（地图画布），myOptions）;      VAR的标记=新google.maps.Marker（{
          位置：经纬度，
          地图：地图，
          标题：你在这里（至少内！+ position.coords.accuracy +米半径）
      }）;
    }    google.maps.event.addDomListener（窗口'负荷'，navigator.geolocation.getCurrentPosition（成功））;＆LT; / SCRIPT＆GT;
 

我原本只是复制和粘贴从API站点code和它工作得很好，但只要我开始拉停在我的移动设备浏览器工作的GPS数据。任何帮助将是AP preciated。

解决方案

navigator.geolocation.getCurrentPosition不返回的位置。所以，你不能使用的结果但addDomListener（窗口...

的参数

它做什么，是发送一个请求。当该请求是准备好了，一个回调triggerd。在该回调可以触发你的函数成功（）（我把它命名为初始化）。

---

为了表明这是怎么回事。
您仍然可以选择，如果这是进行一个很好的方式。
随意命名，扩展，...

 ＆LT;脚本SRC =htt​​p://maps.googleapis.com/maps/api/js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    函数初始化（位置，精度）{
      VAR经纬度= ||位置新google.maps.LatLng（50.45，4.45）; //设置自己的默认位置。这得到如果参数留空调用。
      VAR myOptions = {
        变焦：15，
        中心：经纬度
      };
      VAR地图=新google.maps.Map（的document.getElementById（地图画布），myOptions）;
      如果（位置）{
        VAR的标记=新google.maps.Marker（{
            位置：经纬度，
            地图：地图，
            标题：你在这里（至少内！+精度+米半径）
        }）;
      }
      其他{
        //用户的位置没有找到
      }
    }
    功能locationFound（位置）{
      初始化（
        新google.maps.LatLng（position.coords.latitude，position.coords.longitude）
        position.coords.accuracy
      ）;
    }
    功能locationNotFound（）{
      初始化（NULL，NULL）;
    }
    功能PAGE_LOADED（）{
      //加载页面时，我们可以发送要搜索的用户的位置的请求
      navigator.geolocation.getCurrentPosition（locationFound，locationNotFound）;
    }
    google.maps.event.addDomListener（窗口'负荷'，PAGE_LOADED）;
＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
＃地图帆布{
  宽度：500像素;
  高度：400像素;
}
＆LT; /风格＆GT;
＆LT; D​​IV ID =地图画布＆GT;＆LT; / DIV＆GT;
 

也许这是一个更好的主意先加载地图，并设置默认位置。
当位置被发现，你改变了中心，并设置标志。
现在请注意：如果没有找到位置，这需要locationNotFound调用之前相当长的一段时间

I'm clueless as to why this won't run on my mobile browser but it will run on my PC browser, chrome to be exact.

Could any of you provide feedback.

Link to the server I'm testing this on:

54.172.35.180/chat/chatlist.php

<script type="text/javascript">

    function success(position) {

      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var myOptions = {
        zoom: 15,
        center: latlng,
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

      var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
          title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
      });
    }

    google.maps.event.addDomListener(window, 'load', navigator.geolocation.getCurrentPosition(success));

</script>

I originally just copied and pasted the code from the API site and it worked fine but as soon as I started pulling GPS data it stopped working on my mobile device's browser. Any help would be appreciated.

解决方案

navigator.geolocation.getCurrentPosition doesn't return a position. So you can't use that result as a parameter of addDomListener(window, ...

What it does, is send a request. When that request is ready, a callback is triggerd. In that callback you can trigger your function success() (I named it initialize).

---

Just to show what's going on. You can still choose if this is a good way to proceed. Feel free to rename, extend, ...

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize(position, accuracy) {
      var latlng = position || new google.maps.LatLng(50.45, 4.45);    // set your own default location.  This gets called if the parameters are left blank.
      var myOptions = {
        zoom: 15,
        center: latlng
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
      if (position) {
        var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            title: "You are here! (at least within a " + accuracy + " meter radius)"
        });
      }
      else {
        // position of the user not found
      }
    }
    function locationFound(position) {
      initialize( 
        new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        position.coords.accuracy
      );
    }
    function locationNotFound() {
      initialize(null, null);
    }
    function page_loaded() {
      // the page is loaded, we can send a request to search for the location of the user
      navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
    }
    google.maps.event.addDomListener(window, 'load', page_loaded);
</script>
<style>
#map-canvas {
  width: 500px;
  height: 400px;
}
</style>
<div id="map-canvas"></div>

Probably it's a better idea to first load a map and set a default location. When the location is found, you change the center and set the marker. Notice now: if the location is not found, it takes quite a long time before locationNotFound is called

这篇关于谷歌的Javascript地图API加载在Web浏览器而不是Android浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！