在单击时突出显示Google地图多边形边框,可以通过以下步骤实现:
以下是一个示例代码片段,演示如何在单击时突出显示Google地图多边形边框:
// 创建地图
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194},
zoom: 12
});
// 创建多边形
var polygon = new google.maps.Polygon({
paths: [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
// 监听地图点击事件
google.maps.event.addListener(map, 'click', function(event) {
// 获取点击位置的经纬度坐标
var clickedLatLng = event.latLng;
// 判断点击位置是否在多边形的边上
var isOnEdge = google.maps.geometry.poly.isLocationOnEdge(clickedLatLng, polygon, 0.0001);
if (isOnEdge) {
// 突出显示边的样式
polygon.setOptions({
strokeColor: '#00FF00',
strokeWeight: 4
});
}
});
这是一个简单的示例,可以根据实际需求进行修改和扩展。另外,腾讯云没有直接相关的产品和产品介绍链接地址可提供。
领取专属 10元无门槛券
手把手带您无忧上云