Google Map API v3 对除多边形外的所有内容进行着色 [英] Google Map API v3 shade everything EXCEPT for polygon
问题描述
所以到目前为止,我们已经熟悉使用 v3 API 向 Google 地图添加形状:
$j('#map').gmap('addShape', 'Circle', {'strokeWeight': 0,'fillColor': "#008595",'fillOpacity':0.25,中心":结果[0].geometry.location,半径":1500,可点击":假});
上面的代码将创建一个圆圈并用填充 #008595 对其进行着色.有没有办法对地图进行反向着色?我希望整个世界都以半不透明度着色/填充,除了我的标记所在的洞.可能吗?
你需要定义一个覆盖整个世界并且里面有一个洞的多边形,你不能用Circle"来实现或矩形"形状,它必须是具有(至少)两条路径的多边形.
相关问题:
代码片段:
//本例在地图上创建圆圈,代表//美国的人口.//首先,为每个城市创建一个包含 LatLng 和人口的对象.var citymap = {};城市地图['芝加哥'] = {中心:新的 google.maps.LatLng(41.878113, -87.629798),人口:2842518};城市地图['纽约'] = {中心:新的 google.maps.LatLng(40.714352, -74.005973),人口:8143197};城市地图['洛杉矶'] = {中心:新的 google.maps.LatLng(34.052234, -118.243684),人口:3844829};var cityCircle;var bounds = new google.maps.LatLngBounds();函数drawCircle(点,半径,目录){var d2r = Math.PI/180;//度数到弧度var r2d = 180/Math.PI;//弧度到度变量地球半径 = 3963;//3963 是以英里为单位的地球半径无功点 = 32;//在纬度/经度中找到raidusvar rlat =(半径/地球半径)* r2d;var rlng = rlat/Math.cos(point.lat() * d2r);var extp = new Array();如果(目录== 1){无功开始= 0;var 结束 = 点数 + 1}//这里额外的一项确保我们连接两端别的 {var start = 点数 + 1;无功结束 = 0}for (var i = start;(dir == 1 ? i < end : i > end);i = i + 目录) {var theta = Math.PI * (i/(points/2));ey = point.lng() + (rlng * Math.cos(theta));//中心 a + 半径 x * cos(theta)ex = point.lat() + (rlat * Math.sin(theta));//中心 b + 半径 y * sin(theta)extp.push(new google.maps.LatLng(ex, ey));bounds.extend(extp[extp.length - 1]);}返回 ext;}函数初始化(){//创建地图.var mapOptions = {缩放:4,中心:新的 google.maps.LatLng(37.09024, -95.712891),mapTypeId: google.maps.MapTypeId.TERRAIN};var map = new google.maps.Map(document.getElementById('map-canvas'),地图选项);var 外界 = [新的 google.maps.LatLng(85, 180),新的 google.maps.LatLng(85, 90),新的 google.maps.LatLng(85, 0),新的 google.maps.LatLng(85, -90),新的 google.maps.LatLng(85, -180),新的 google.maps.LatLng(0, -180),新的 google.maps.LatLng(-85, -180),新的 google.maps.LatLng(-85, -90),新的 google.maps.LatLng(-85, 0),新的 google.maps.LatLng(-85, 90),新的 google.maps.LatLng(-85, 180),新的 google.maps.LatLng(0, 180),新的 google.maps.LatLng(85, 180)];var 人口选项 = {中风颜色:'#FF0000',中风不透明度:0.8,行程重量:2,填充颜色:'#FF0000',填充不透明度:0.35,地图:地图,路径:[outerbounds, drawCircle(citymap['newyork'].center, 10, -1)]};//将这个城市的圆圈添加到地图上.cityCircle = new google.maps.Polygon(populationOptions);map.fitBounds(bounds);}google.maps.event.addDomListener(window, 'load', initialize);
html,身体,#地图画布{高度:100%;边距:0px;填充:0px}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></脚本><div id="map-canvas"></div>
So by now we're familiar with adding shapes to a Google map with the v3 API:
$j('#map').gmap('addShape', 'Circle', {
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': result[0].geometry.location,
'radius': 1500,
'clickable': false
});
The above code will create a circle and shade it with fill #008595. Is there any way to inversely shade a map? I would like the entire world to be shaded/filled at half opacity except for a hole where my markers are. Possible?
you need to define a polygon that covers the whole world and has a hole in it, you can't do it with the "Circle" or "Rectangle" shapes, it has to be a polygon with (at least) two paths.
here is an example
related questions:
- Change map opacity outside circle of Google Maps JavaScript API v3
- Highlight polygon and tint rest of map using Google Maps
code snippet:
// 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>
这篇关于Google Map API v3 对除多边形外的所有内容进行着色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!