Встроенная google-карта на полноценном веб-сайте - PullRequest
Новая
       12

Встроенная google-карта на полноценном веб-сайте

0 голосов
/ 23 января 2019

Я только что встроил свою карту Google на свой веб-сайт, который использует fullPage.js, но у меня небольшая проблема.Когда курсор / указатель мыши находится в верхней части карты и при попытке увеличить / уменьшить изображение, он также перемещается на следующую / предыдущую страницу.Изображение веб-сайта со встроенной картой: https://i.imgur.com/fjBC2my.png

Я действительно ничего не пробовал, потому что я новичок в этом мире программистов, и я не знаю, с чего начать, чтобы я мог решить эту проблемумой.Поэтому я был бы очень признателен, если бы вы мне помогли и дали несколько советов, чтобы сделать это возможным

Все, что я сделал, это отключил прокрутку мыши (перемещение только с навигационной панели или с помощью стрелок на клавиатуре), но это непостоянное решение.

Это мой index.php: https://pastebin.com/EThG2EG3 И это fullPage.js, который я использую с отключенной прокруткой мыши (возможно, это не последняя версия): https://pastebin.com/sm14aAie

То, что я пытаюсь сделать, это когда указатель находится вверху карты, он должен фокусироваться на карте, и он не должен перемещаться со страницы на страницу (это применимо и в полноэкранном режиме карты)

1 Ответ

0 голосов
/ 23 января 2019

Проверьте параметр normalScrollElements в документации Github для плагина FullPage.js.Когда вы инициализируете плагин в своем javascript, попробуйте добавить этот параметр с идентификатором элемента вашей карты.

Добавить идентификатор для карты в CSS: 

<div class="section" id="section1">
    <div class="intro" id="gmap">
        <center>
            <?php require('lib/map.php'); ?>
        </center>
    </div>
</div>

Добавить параметр Javascript: 

var myFullpage = new fullpage ('#fullpage',
{
    sectionsColor: ['red', '#4BBFC3', '#7BAABE', 'red'],
    anchors: ['home', 'locations', 'about', 'contact'],
    menu: '#menu',
    slidesNavigation: true,
    normalScrollElements: '#gmap',
    // lazyLoad: true,
});
...