Google Map API v3 遮蔽除多边形之外的所有内容

Question

所以现在我们已经熟悉了如何使用 v3 API 向 Google 地图添加形状：

$j('#map').gmap('addShape', 'Circle', { 
    'strokeWeight': 0, 
    'fillColor': "#008595", 
    'fillOpacity': 0.25, 
    'center': result[0].geometry.location, 
    'radius': 1500, 
    'clickable': false 
});

上面的代码将创建一个圆圈并用 #008595 填充它。 有没有什么办法可以对地图进行反向着色？ 我希望整个世界都以半不透明度进行阴影/填充，除了我的标记所在的洞。 可能的？

Answer 1

您需要定义一个覆盖整个世界并在其中有一个洞的多边形，您不能使用“圆形”或“矩形”形状来实现它，它必须是具有（至少）两条路径的多边形。

这是一个例子

相关问题：

• 更改 Google Maps JavaScript API v3 圈外的地图不透明度
• 使用 Google 地图突出显示多边形并为地图的其余部分着色

代码片段：

 // This example creates circles on the map, representing // populations in the United States. // First, create an object containing LatLng and population for each city. var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(41.878113, -87.629798), population: 2842518 }; citymap['newyork'] = { center: new google.maps.LatLng(40.714352, -74.005973), population: 8143197 }; citymap['losangeles'] = { center: new google.maps.LatLng(34.052234, -118.243684), population: 3844829 }; var cityCircle; var bounds = new google.maps.LatLngBounds(); function drawCircle(point, radius, dir) { var d2r = Math.PI / 180; // degrees to radians var r2d = 180 / Math.PI; // radians to degrees var earthsradius = 3963; // 3963 is the radius of the earth in miles var points = 32; // find the raidus in lat/lon var rlat = (radius / earthsradius) * r2d; var rlng = rlat / Math.cos(point.lat() * d2r); var extp = new Array(); if (dir == 1) { var start = 0; var end = points + 1 } // one extra here makes sure we connect the ends else { var start = points + 1; var end = 0 } for (var i = start; (dir == 1? i < end: i > end); i = i + dir) { var theta = Math.PI * (i / (points / 2)); ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) extp.push(new google.maps.LatLng(ex, ey)); bounds.extend(extp[extp.length - 1]); } return extp; } function initialize() { // Create the map. var mapOptions = { zoom: 4, center: new google.maps.LatLng(37.09024, -95.712891), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var outerbounds = [ new google.maps.LatLng(85, 180), new google.maps.LatLng(85, 90), new google.maps.LatLng(85, 0), new google.maps.LatLng(85, -90), new google.maps.LatLng(85, -180), new google.maps.LatLng(0, -180), new google.maps.LatLng(-85, -180), new google.maps.LatLng(-85, -90), new google.maps.LatLng(-85, 0), new google.maps.LatLng(-85, 90), new google.maps.LatLng(-85, 180), new google.maps.LatLng(0, 180), new google.maps.LatLng(85, 180) ]; var populationOptions = { strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, paths: [outerbounds, drawCircle(citymap['newyork'].center, 10, -1)] }; // Add the circle for this city to the map. cityCircle = new google.maps.Polygon(populationOptions); map.fitBounds(bounds); } google.maps.event.addDomListener(window, 'load', initialize);

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div>