javascript — маркер API Google Map не отображается на карте в мобильном телефоне
Я использую Google Map Javascript API с кластеризацией маркеров и InfoBox на веб-сайте Laravel
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>Решение
После проверки он был связан не с Google Map, а с файлом среды моего сервера .env (я использую Laravel)
Переменная APP_URL ссылалась на «localhost» в файле .env, и эта переменная APP_URL использовалась в коде Javascript (с использованием PHP-Vars-To-Js-Transformer) для получения некоторых ресурсов сервера img:
Это привело к тому, что ресурсы на рабочем столе были должным образом загружены на API карты Google, но не на мобильном телефоне.
Замена localhost на URL моего сайта в файле .env решила проблему.
Другие решения
Других решений пока нет …