Google Maps Javascript API v3地图显示在桌面浏览器上，但不会显示在移动浏览器上 [英] Google Maps Javascript API v3 map displays on desktop browser but won't display on mobile browser

问题描述

我正在开发一个应用程序，该应用程序使用Google Maps Javascript API v3显示地图，并且可以在桌面浏览器上显示它的显示方式，但不能在手机的浏览器上显示.

I'm developing an app that displays a map using Google Maps Javascript API v3, and it displays the way it's supposed to on my desktop browser, but it doesn't on my mobile's browser.

因此，我已经检查了以下内容:

So, I've checked this: My Google Map javascript code displays on desktop browser but not my mobile phone browser

这是: JavaScript Google在Web浏览器中加载Maps API，在Android浏览器中加载

这是我所能找到的与问题有关的所有内容，但两者都有一个类似的问题，那就是他们将navigator.geolocation.getCurrentPosition()作为其初始化函数的参数或类似的参数传递，而不是传递初始化为getCurrentPosition()的回调.我还看到有人造成同样的问题，因为他们在文档加载之前就要求当前位置，这也不是我的问题，因为我从jQuery的$(document)调用getCurrentPosition().准备好().

It was everything I could find relating to my issue, but both of these had a similar problem which was that they were passing navigator.geolocation.getCurrentPosition() as a parameter to their initialize function or something like that, instead of passing initialize as the callback for getCurrentPosition(). I've also seen someone with the same issue that was being caused because they were asking for the current position before the document had loaded, which is also not my issue, for I'm calling getCurrentPosition() from jQuery's $(document).ready().

这是我的代码，非常感谢您的帮助:

Here's my code, any help is greatly appreciated:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
    <script type="text/javascript" 
            src="http://maps.googleapis.com/maps/api/js?sensor=true">            
    </script>
<script type="text/javascript">
  function initialize(location) {
      console.log(location);
    var currentLocation= new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
    var mapOptions = {            
      center: currentLocation,
      zoom: 17,
      disableDefaultUI:true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
       mapOptions);
    var marker= new google.maps.Marker({
        position:currentLocation,
        map: map
    });
  }    

  $(document).ready(function(){
     navigator.geolocation.getCurrentPosition(initialize);
  });
</script>

推荐答案

在使用navigator.geolocation时，我也遇到了同样的问题，该问题似乎在PC上运行良好.我尝试在手机上访问它，但一直显示错误. 我终于通过在移动设备上访问的地址添加https://来解决此问题.即使您的网站上没有SSL，只需在网址中添加https://，一切都会好起来的.

I also encountered the same problem using navigator.geolocation which seem to work well on PC. I tried accessing it on my phone but keeps showing error. I finally resolved the issue by adding https:// to the address I was visiting on my mobile. Even if you don't have an SSL on your site, just add https:// to the url and everything will be fine.

这篇关于Google Maps Javascript API v3地图显示在桌面浏览器上，但不会显示在移动浏览器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！