,可以通过Google Maps JavaScript API来实现。
首先,需要在HTML页面中引入Google Maps JavaScript API的库文件,并创建一个地图容器:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Polygon</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
zoom: 12 // 设置地图缩放级别
});
// 创建多个多边形
var polygon1 = new google.maps.Polygon({
paths: [
{lat: 37.7749, lng: -122.4194},
{lat: 37.7749, lng: -122.4316},
{lat: 37.7833, lng: -122.4316},
{lat: 37.7833, lng: -122.4194}
],
strokeColor: '#FF0000', // 设置边框颜色
strokeOpacity: 0.8, // 设置边框透明度
strokeWeight: 2, // 设置边框宽度
fillColor: '#FF0000', // 设置填充颜色
fillOpacity: 0.35 // 设置填充透明度
});
var polygon2 = new google.maps.Polygon({
paths: [
{lat: 37.7749, lng: -122.4094},
{lat: 37.7749, lng: -122.4216},
{lat: 37.7833, lng: -122.4216},
{lat: 37.7833, lng: -122.4094}
],
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.35
});
// 将多边形添加到地图上
polygon1.setMap(map);
polygon2.setMap(map);
// 切换多边形的可见性
document.getElementById('togglePolygon1').addEventListener('click', function() {
if (polygon1.getMap()) {
polygon1.setMap(null);
} else {
polygon1.setMap(map);
}
});
document.getElementById('togglePolygon2').addEventListener('click', function() {
if (polygon2.getMap()) {
polygon2.setMap(null);
} else {
polygon2.setMap(map);
}
});
}
</script>
<button id="togglePolygon1">Toggle Polygon 1</button>
<button id="togglePolygon2">Toggle Polygon 2</button>
</body>
</html>
上述代码中,首先创建了一个地图容器,并引入了Google Maps JavaScript API的库文件。然后,在initMap
函数中,创建了两个多边形,并设置了它们的属性,如边框颜色、填充颜色等。接着,将多边形添加到地图上,并通过按钮的点击事件来切换多边形的可见性。
需要注意的是,上述代码中的YOUR_API_KEY
需要替换为你自己的Google Maps API密钥。
推荐的腾讯云相关产品是腾讯地图开放平台,它提供了类似Google Maps的地图服务,可以在腾讯云官网上查找相关产品和产品介绍链接地址。
领取专属 10元无门槛券
手把手带您无忧上云