Листовка серая на мобильных браузерах

Question

Листовка серая на мобильных браузерах

1

Эта карта листовка отлично работает на настольных браузерах, она не в мобильных браузерах, не понимает, где ошибка!

var map = new L.Map("tour-map",{ zoomControl: false, maxZoom: 15 });

var basemaps = {
    opentopomap: L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'),
    hikebike: L.tileLayer('http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png'),
    worldimagery: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
};

L.control.layers(basemaps).addTo(map);

basemaps.opentopomap.addTo(map);

Консоль Chrome не показывает никаких ошибок...

Это css:

#tour-map { position: relative; margin: 0 auto; width: 100%; height: 360px; }

AngusYoung14 31 июль 2018, в 11:42

Источник

1

Добро пожаловать на ТАК! Как вы определяете размер контейнера карты "tour-map" ? Это мобильный браузер или WebView?
ghybs 31 июль 2018, в 09:41
0

Привет ghybs и спасибо за вашу помощь! Это css: #tour-map { position: relative; margin: 0 auto; width: 100%; height: 360px; }
AngusYoung14 01 авг. 2018, в 11:49
0

Вы должны отредактировать свой вопрос вместо добавления дополнительной информации в комментариях (под вашим вопросом должна быть серая ссылка). Это мобильный браузер или WebView?
ghybs 01 авг. 2018, в 12:20
0

Извините, что это мой первый раз в Stack Overflow, и я не очень знаком с этим редактором. Кстати, проблема связана с мобильными браузерами (как я писал в первом посте)
AngusYoung14 02 авг. 2018, в 09:10
0

Np, все учатся в какой-то момент… :-) Невозможно воспроизвести вашу проблему с помощью предоставленного кода (после того, как вы map.setView(latlng, zoom) ) в Chrome на Android: jsfiddle.net/3v7hd2vx/2103/embedded
ghybs 02 авг. 2018, в 10:50
0

Могу ли я опубликовать URL сайта?
AngusYoung14 02 авг. 2018, в 13:17
0

Вы могли бы, но гораздо предпочтительнее, чтобы вы установили MCVE, какой код вы делитесь в своем вопросе, и, возможно, в сервисе совместной работы с живым кодом (например, вышеупомянутый JSFiddle). Очень немногие люди будут иметь смелость зайти на ваш сайт и покопаться в вашем полном коде, и это не дух SO (т.е. сбор знаний для будущих читателей, поэтому мы не можем полагаться исключительно на внешние ресурсы, которые наверняка изменятся).
ghybs 02 авг. 2018, в 13:45
0

Я попытался последовать вашему примеру и повторить весь код на jsfiddle.net/3v7hd2vx/2151
AngusYoung14 06 авг. 2018, в 20:41
0

Спасибо за JSFiddle. Обратите внимание, что raw.githubusercontent не подходит в качестве CDN, вместо этого вы должны использовать rawgit, как вы это делали для библиотеки GPX. Кроме того, не смешивайте протоколы HTTP и HTTPS: когда вы получаете доступ к JSFiddle через HTTPS, некоторые из ваших ресурсов HTTP не будут загружаться (например, ваш файл GPX). Пожалуйста, поделитесь примером репликации, который работает в основном (в частности, добавьте setView ), за исключением проблемы, которую вы описываете. Наконец, смысл MCVE заключается в том, что вы не делитесь своим полным кодом, а отбираете его из вторичных функций и показывает только то, что необходимо для возникновения проблемы.
ghybs 07 авг. 2018, в 02:33
0

Кстати, вы, кажется, не используете консоль браузера (ссылка для Firefox, но во всех браузерах есть что-то похожее). Узнайте, как использовать его, чтобы увидеть сообщения об ошибках.
ghybs 07 авг. 2018, в 02:36
0

Большое спасибо за вашу помощь, я следовал вашим советам и использовал rawgit: jsfiddle.net/3v7hd2vx/2181, он все еще не работает, но в любом случае вы указали мне, чтобы я решил проблему на живом веб-сайте: смешивание HTTP и HTTPS - это самое главное!
AngusYoung14 07 авг. 2018, в 09:03
0

Отличная работа! :-) Не стесняйтесь написать свой собственный ответ и принять его позже, так что, если у других людей возникнет та же проблема, что и у вас, они смогут быстрее найти решение!
ghybs 07 авг. 2018, в 09:19

Показать ещё 10 комментариев

Теги:

javascript

leaflet

1 ответ

Ещё вопросы

Добро пожаловать на ТАК! Как вы определяете размер контейнера карты "tour-map" ? Это мобильный браузер или WebView?
Привет ghybs и спасибо за вашу помощь! Это css: #tour-map { position: relative; margin: 0 auto; width: 100%; height: 360px; }
Вы должны отредактировать свой вопрос вместо добавления дополнительной информации в комментариях (под вашим вопросом должна быть серая ссылка). Это мобильный браузер или WebView?
Извините, что это мой первый раз в Stack Overflow, и я не очень знаком с этим редактором. Кстати, проблема связана с мобильными браузерами (как я писал в первом посте)
Np, все учатся в какой-то момент… :-) Невозможно воспроизвести вашу проблему с помощью предоставленного кода (после того, как вы map.setView(latlng, zoom) ) в Chrome на Android: jsfiddle.net/3v7hd2vx/2103/embedded
Вы могли бы, но гораздо предпочтительнее, чтобы вы установили MCVE, какой код вы делитесь в своем вопросе, и, возможно, в сервисе совместной работы с живым кодом (например, вышеупомянутый JSFiddle). Очень немногие люди будут иметь смелость зайти на ваш сайт и покопаться в вашем полном коде, и это не дух SO (т.е. сбор знаний для будущих читателей, поэтому мы не можем полагаться исключительно на внешние ресурсы, которые наверняка изменятся).
Я попытался последовать вашему примеру и повторить весь код на jsfiddle.net/3v7hd2vx/2151
Спасибо за JSFiddle. Обратите внимание, что raw.githubusercontent не подходит в качестве CDN, вместо этого вы должны использовать rawgit, как вы это делали для библиотеки GPX. Кроме того, не смешивайте протоколы HTTP и HTTPS: когда вы получаете доступ к JSFiddle через HTTPS, некоторые из ваших ресурсов HTTP не будут загружаться (например, ваш файл GPX). Пожалуйста, поделитесь примером репликации, который работает в основном (в частности, добавьте setView ), за исключением проблемы, которую вы описываете. Наконец, смысл MCVE заключается в том, что вы не делитесь своим полным кодом, а отбираете его из вторичных функций и показывает только то, что необходимо для возникновения проблемы.
Кстати, вы, кажется, не используете консоль браузера (ссылка для Firefox, но во всех браузерах есть что-то похожее). Узнайте, как использовать его, чтобы увидеть сообщения об ошибках.
Большое спасибо за вашу помощь, я следовал вашим советам и использовал rawgit: jsfiddle.net/3v7hd2vx/2181, он все еще не работает, но в любом случае вы указали мне, чтобы я решил проблему на живом веб-сайте: смешивание HTTP и HTTPS - это самое главное!
Отличная работа! :-) Не стесняйтесь написать свой собственный ответ и принять его позже, так что, если у других людей возникнет та же проблема, что и у вас, они смогут быстрее найти решение!

AngusYoung14 · Accepted Answer · 2018-08-07T16-19-00.000Z

Проблема была вызвана смешиванием протоколов HTTP и HTTPS. Большое спасибо ghybs за помощь мне!