谷歌地图API V3使用阴影，除了多边形

所以现在我们熟悉的形状添加到谷歌地图的API第3版：谷歌地图API V3使用阴影，除了多边形

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

上面的代码将创建一个圆和阴影它填充＃008595。有什么方法可以反向阴影地图吗？我希望整个世界都被遮蔽/填充半透明度，除了我的标记所在的一个洞。可能？

来源

2012-06-21 emc

退房该解决方案张贴在这里：http://stackoverflow.com/questions/2956355/highlight-polygon-and-int-rest-of-map-using-google-maps – Cecchi

你需要定义一个覆盖整个世界并且有一个洞的多边形，你不能用“圆”或“矩形”形状来做它，它必须是一个多边形（至少）两条路径。

here就是一个例子

代码片段：

// 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"></script> 
 
<div id="map-canvas"></div>

来源

2012-06-21 02:48:43 geocodezip

很好的例子.. –

现在可以在谷歌ios地图？ –

谷歌地图API V3使用阴影，除了多边形

回答

相关问题