在整页网站上嵌入谷歌地图答案

【问题标题】：Embedded google-map on a fullPage website在整页网站上嵌入谷歌地图
【发布时间】：2019-01-23 15:10:24
【问题描述】：

我刚刚将我的谷歌地图嵌入到使用 fullPage.js 的网站中，但我遇到了一个小问题。当鼠标光标/指针位于地图顶部并且尝试放大/缩小时，它也会移动到下一页/上一页。嵌入地图的网站图片：https://i.imgur.com/fjBC2my.png

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

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

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

我想要完成的是，当指针位于地图顶部时，它应该聚焦在地图上并且不应该在页面之间移动（这也适用于全屏地图）

【问题讨论】：

标签： javascript php html google-maps fullpage.js

【解决方案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,
});

【讨论】：