📅 最后修改于: 2023-12-03 15:16:41.805000 🧑 作者: Mango
jQuery GMaps 插件是一个可以在网页中嵌入 Google 地图的 jQuery 插件。使用该插件可以轻松地在网页中显示地图，并在地图上显示标记、信息窗口、轮廓等功能。
要使用 jQuery GMaps 插件，您需要将它下载到您的电脑中，并将其作为 Javascript 文件引入到您的网页中。您可以在 GitHub 上下载最新版本的插件。
例如，在您的 HTML 文档中添加以下代码来引入该插件:
<script src="https://cdn.jsdelivr.net/gmaps/0.4.25/gmaps.min.js"></script>
使用 jQuery GMaps 插件，您需要在 HTML 中添加一个 div 元素，用来作为地图的容器。然后，您可以使用以下 Javascript 代码初始化一个地图对象：
$(function() {
var map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
map.addMarker({
lat: -12.043333,
lng: -77.03,
title: 'Lima',
click: function(e) {
alert('You clicked in this marker');
}
});
});
在上面的代码中，我们首先使用 new GMaps() 创建了一个地图对象，并指定了它的容器 div 的 ID 和地图的中心坐标。然后，我们使用 addMarker() 方法在地图上添加了一个标记，并设置了标记的位置、标题以及点击事件。
您还可以在地图上添加多个标记，设置信息窗口、轮廓等属性。详情请查看 官方文档。
以下是一个使用 jQuery GMaps 插件的简单示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery GMaps Plugin Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gmaps/0.4.25/gmaps.min.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
$(function() {
var map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
map.addMarker({
lat: -12.043333,
lng: -77.03,
title: 'Lima',
click: function(e) {
alert('You clicked in this marker');
}
});
});
</script>
</body>
</html>