在整页网站上嵌入 google-地图

Question

我刚刚将 google 地图嵌入到使用 fullPage.js 的网站，但我遇到了一个小问题。当鼠标 cursor/pointer 位于地图顶部并尝试缩放 in/out 时，它也会移动到 next/previous 页面。嵌入地图的网站图片：https://i.imgur.com/fjBC2my.png

我真的没有尝试过任何东西，因为我是这个程序员世界的新手，我不知道从哪里开始，所以我可以解决我的这个问题。所以如果你能帮助我并给我一些提示使这成为可能，我将不胜感激

我所做的只是禁用鼠标滚动（仅从导航栏或使用键盘箭头移动），但这不是永久的解决方案。

这是我的index.php：https://pastebin.com/EThG2EG3 这是我在禁用鼠标滚动时使用的 fullPage.js（可能不是最新版本）：https://pastebin.com/sm14aAie

我想要完成的是，当指针位于地图顶部时，它应该聚焦在地图上，而不应该从一页移动到另一页（这也适用于地图的全屏显示）

Answer 1

查看 FullPage.js 插件的 Github 文档中的 normalScrollElements 参数。当您在 javascript 中初始化插件时，尝试将此参数添加到地图的元素 ID。

为 CSS 中的地图添加 ID：

<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,
});

在整页网站上嵌入 google-地图

Embedded google-map on a fullPage website

html

javascript

php

google-maps

fullpage.js