Javascript Google Maps API 在 Web 浏览器中加载，但不是 Android 浏览器答案

【问题标题】：Javascript Google Maps API loading in Web Browser but not Android BrowserJavascript Google Maps API 在 Web 浏览器中加载，但不是 Android 浏览器
【发布时间】：2015-01-02 11:48:28
【问题描述】：

我不知道为什么它不能在我的移动浏览器上运行，但它会在我的 PC 浏览器上运行，确切地说是 chrome。

你们中的任何人都可以提供反馈吗？

链接到我正在测试的服务器：

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>

我最初只是从 API 站点复制并粘贴代码，它运行良好，但一旦我开始提取 GPS 数据，它就停止在我的移动设备浏览器上运行。任何帮助，将不胜感激。

【问题讨论】：

这绝对可以解决您的问题。 stackoverflow.com/a/55531213/8606018

标签： javascript android api google-chrome maps

【解决方案1】：

navigator.geolocation.getCurrentPosition 不返回位置。所以你不能将该结果用作 addDomListener(window, ...

它的作用是发送请求。当该请求准备就绪时，将触发回调。在该回调中，您可以触发您的函数 success()（我将其命名为初始化）。

只是为了显示正在发生的事情。您仍然可以选择这是否是一个好方法。随意重命名，扩展，...

<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>

首先加载地图并设置默认位置可能是一个更好的主意。找到位置后，更改中心并设置标记。现在注意：如果找不到位置，则调用 locationNotFound 需要相当长的时间

【讨论】：