在Web应用程序中，Google Maps是一个非常强大且广泛使用的地图API。本文将教你如何使用Google Maps API和JavaScript代码，在Google Maps上使用鼠标绘制多边形。
步骤
- 首先，我们需要创建一个Google Maps应用程序并加载Google Maps API。创建一个新的HTML文件，并添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------- -- ------ ------------ ------ --------------- --------------------------- ------------------ ------ ---------------- -------- ------ - ---------- ----- --- ------- ------ - ---------- ----- ---------- -- ----------- -- --- --------- ------- ------ ----- --------------- -------- ------------------------------------------------------------------------ -------- ----------------------- ------- -------
请注意替换YOUR_API_KEY为你自己的Google Maps API密钥。如果你还没有API密钥，请参阅这里获取说明。
- 接下来，在
main.js中，我们将创建一个Google Maps实例并将其显示在页面上。添加以下代码：
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 39.91, lng: 116.38},
zoom: 12,
});
}此代码将创建一个新的Google Maps实例，并在北京市中心显示地图。你可以更改center和zoom选项，以调整地图的显示区域和缩放级别。
- 然后，我们需要添加一个事件监听器，以便当用户在地图上单击时，我们可以绘制多边形。添加以下代码：
-- -------------------- ---- ------- --- --------------- --- -------------- -------- -------------------- - --------------- - --- ------------------------------------ -------------- ---------------------------------------- ----------------- ----- ------------------------ - ------------ --------------------------------------- ---------------- ------------------------------------------ ---- ----------------- - ------------- ---------- --------------- ----- ---------------- -- --------------- ---------- ------------- ------ ------------ ----- ---------- -- ---- ---- ---------------------------------------------- ------------------ --------------- - ---- --------------- - ------------------------------ --- --------------- - -------------- ---- - ---------------------------------- -------- --------------- - --- ---------------- - ------------------------------ -- ---------------------- ---------------------------- ---
这段代码将创建一个DrawingManager对象，并将其绑定到地图上。当用户单击地图时，overlaycomplete事件将会被触发，并在地图上绘制多边形。我们还添加了一个事件监听器，以便当用户再次单击地图时，可以绘制另一个多边形。
- 最后，我们需要添加一些CSS样式来控制地图和多边形的显示。添加以下代码：
.gm-style-iw {
display: none !important;
}
.gm-style .gm-style-mtc label,
.gm-style .gm-style-mtc div {
font-size: 14px !important;
}这段代码将隐藏Google Maps API的信息窗口，并调整多边形工具栏的字体大小。
示例代码
完整的示例代码如下所示：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------- -- ------ ------------ ------ --------------- --------------------------- ------------------ ------ -------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------