在 javascript Themezy 模板中向地图添加标记

Question

我从here下载了一个免费模板，它有一个contact.html文件，以及一个包含[=30的js目录=],jquery-1.11.1.min.js,jquery1.11.1.min.map 和 plugins.js 文件。我编辑了 plugins.js 文件并更改了中心和缩放，但我一直在尝试添加标记和自定义图标，但找不到哪个文件以及如何添加必须编辑它；它使用 Gmap3。 app.js 文件包含：

if ($(".map").length) {
    $('.map').gmap3({
            map: {
                options: {
                    maxZoom: 14
                }
            },
            marker: {
                address: "40 Sibley St, Detroit",
            }
        },
        "autofit");
}
});

Answer 1

“40 Sibley St, Detroit”上已经有一个默认标记。为了让它显示在地图上，并使地图本身成功加载，您首先需要将您自己项目的 API 键添加到 Maps API 脚本（在 modern_architecture/HTML/contact.html):

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

像这样：

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=en&key=AIza..."></script>

确保您也将 http 替换为 https。

注意： 您必须从启用了计费的项目中添加有效的 API 密钥以及 JavaScript API 和地理编码 API 已启用。请通过 Google 的 get started guide.

一旦您的地图和标记出现，要更改标记的地址，请使用您自己的位置修改默认地址（在 app.js）：

marker:{
    address: "Paris, France", // whatever your location is
}

要添加自定义图标试试这个：

marker:{
    address: "Paris, France",
    options: {
        icon: "https://maps.google.com/mapfiles/marker_green.png"
    }
}

这是经过上述更改后我的本地地图实现的样子：

希望对您有所帮助！

在 javascript Themezy 模板中向地图添加标记

Add a marker to a map in javascript Themezy template

javascript

templates

google-maps

marker

jquery-gmap3