Google Map API 标记未出现在移动设备上的地图上答案

【问题标题】：Google Map API marker not appearing on map on mobileGoogle Map API 标记未出现在移动设备上的地图上
【发布时间】：2018-11-25 15:00:48
【问题描述】：

我在 Laravel 网站上使用带有标记聚类和 InfoBox 的 Google Map Javascript API

https://developers.google.com/maps/documentation/javascript/marker-clustering

原生红色标记在桌面上正常显示，但在移动设备上不显示。但是，如果我点击它应该在的位置，我的信息框会出现，如果一切正常，其他一切都会出现。

是否有需要考虑的特殊设置（可能是用于移动显示上此标记的 png 或其他？）

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
 
  var marker = new google.maps.Marker({position: uluru, map: map,icon: image});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

【问题讨论】：

代码在哪里？

标签： javascript php laravel google-maps-api-3 infobox

【解决方案1】：

经检查，与谷歌地图无关，而是与我的服务器.env环境文件有关（我使用的是Laravel）

APP_URL 变量引用了 .env 文件中的“localhost”，并且此 APP_URL 变量用于 Javascript 代码（使用 PHP-Vars-To-Js-Transformer）来检索一些服务器 img 资源：这导致桌面上的资源可以正确加载到 google map api 上，但不能在移动设备上。

在 .env 文件中用我的网站 url 替换 localhost 解决了这个问题。

【讨论】：