更改Google Maps JavaScript API v3圈子外的地图不透明度

所以我现在在我的地图上放一个圈子：

var optionsCercle = { center: latlang, map: map, radius: 1000, fillOpacity: 0.1, strokeWeight: 0 }; this.circ = new google.maps.Circle(optionsCercle); 

现在我把圈子的内部填充Opacity：0.1，但我想要做的是把所有的东西都放在地图上，除了圆圈内部填充Opacity：0.1。 我希望我的视口中的所有东西除了圆圈被“模糊”之外。 我怎样才能做到这一点？

Answer 1

以纽约市为背景的一个圆形“洞”的示例 （从Google示例中修改）：

 var citymap = {}; citymap['newyork'] = { center: new google.maps.LatLng(40.714352, -74.005973), population: 8143197 }; 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 = [ // covers the (mercator projection) world 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)]; // options for the polygon 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); 

工作示例

Answer 2

在相反的位置绘制一个圆圈，像负半径

 {-Lat, (Long-180)%180, 20037508.34-Radius}