在 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.map 和 plugins.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&language=en"></script>
像这样:
<script src="https://maps.google.com/maps/api/js?sensor=false&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"
}
}
这是经过上述更改后我的本地地图实现的样子:
希望对您有所帮助!
我从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");
}
});
“40 Sibley St, Detroit”上已经有一个默认标记。为了让它显示在地图上,并使地图本身成功加载,您首先需要将您自己项目的 API 键添加到 Maps API 脚本(在 modern_architecture/HTML/contact.html):
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
像这样:
<script src="https://maps.google.com/maps/api/js?sensor=false&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"
}
}
这是经过上述更改后我的本地地图实现的样子:
希望对您有所帮助!