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

Question

我从here下载了一个免费模板，它有一个contact.html文件，和一个包含app.js的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 em>):

<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。

注意：您必须从已启用计费以及 JavaScript API 和地理编码 API 的项目中添加有效的 API 密钥。请通过谷歌的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"
    }
}

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

希望这会有所帮助！