변경 맵 불투명 외부 원 그래서 나는 현재 내지도에 원 걸었습니다

Question

:

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

가 지금은 fillOpacity에 원의 안쪽에 넣어 해요 : 0.1하지만, 무엇을 내가 할 일은 원을 채우기 위해 안쪽을 제외한 모든 것을지도 위에 놓는 것입니다 .Opacity : 0.1. 내 뷰포트에서 원을 제외하고 모든 것이 "흐려지기"를 원합니다. 어떻게하면 될까요?

Answer 1

(this Google Example에서 변성) 뉴욕 위에 원형의 "구멍"을두고 예 : 대향 위치 및 음의 반경의 원을 그리

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); 

Working example

Answer 2

like

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