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

Add a marker to a map in javascript Themezy template

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

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

“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"
    }
}

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

希望对您有所帮助!