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

2024-03-18

所以我目前在地图上画了一个圆圈:

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

现在我将圆的内部设置为 fillOpacity:0.1,但我想要做的是将地图上除圆内部之外的所有内容设置为 fillOpacity:0.1。我希望视口中除圆圈之外的所有内容都被“模糊”。我怎样才能做到这一点?


一个在纽约市上空放置一个圆形“洞”的例子(修改自这个谷歌示例 https://developers.google.com/maps/documentation/javascript/examples/circle-simple):

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 use 6371 if using kilometers
  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)); 
    var ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    var 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);

工作示例 http://www.geocodezip.com/v3_GoogleEx_circle-simple_hole.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改 Google Maps JavaScript API v3 圈外的地图不透明度 的相关文章

随机推荐

  • CUDA:如何直接在GPU上使用thrust::sort_by_key? [复制]

    这个问题在这里已经有答案了 Thrust 库可用于对数据进行排序 该调用可能如下所示 带有键和值向量 thrust sort by key d keys begin d keys end d values begin 在 CPU 上调用 d
  • Azure DevOps 服务连接到 B2C 租户?

    我正在尝试建立从 Azure DevOps 到我的 Azure B2C 租户的服务连接 但遇到了问题 我开始认为这是不可能的 我与主 Azure 订阅 租户有多个服务连接 但特别想要与我的 B2C 租户建立连接 以便我可以使用 Terraf
  • 禁用复制构造函数

    我有一堂课 class SymbolIndexer protected SymbolIndexer public static inline SymbolIndexer GetUniqueInstance static SymbolInde
  • 如何从javascript中的回调函数中获取完整数据

    我编写了以下函数 它从 url 获取 json 数据 function getWeatherDataForCities cityArray var arrAllrecords var toDaysTimestamp Math round n
  • 将(可选)参数传递给 HTTP 参数(Python、请求)

    我目前正在开发 API 包装器 并且在将参数从函数传递到请求的有效负载中时遇到问题 参数可以是 blockId senderId recipientId limit offset orderBy 所有参数均通过 OR 连接 一个可能的解决方
  • 在 Rails 中使用 Turbolinks link_to

    只是想知道是否有一种方法可以直接在 Rails link to 帮助程序中使用 Turbolinks 快速的谷歌搜索没有发现任何值得注意的东西 这是我尝试过但无济于事的类型 我知道你可以通过像这样的常规链接来做到这一点 a href gir
  • 为什么使用 twitter bootstrap 的多模式会出现过多递归错误?

    我尝试在另一个模态中包含一个模态 但是 我收到了类似的错误too much recursion在火狐浏览器中 我使用了最新的 jQuery 和 Twitter bootstrap 但仍然有这个问题 这里是plunker http plnkr
  • Windows 服务托管 TCP WCF 服务

    我正在尝试在 Windows 2008 R2 服务器上托管 WCF 服务作为 Windows 服务 我按照 msdn 提供的指示进行操作 在这里找到 http msdn microsoft com en us library ff64981
  • 如何在不创建用户帐户的情况下只允许每人(电脑/手机)对网站上的 1 个帖子投 1 票?

    在学习 Meteor 框架的过程中 我正在将 Yik Yak 移动应用程序重新创建为 Web 应用程序 但该应用程序是完全匿名的 没有用户帐户 但您仍然只能对帖子投赞成票或反对票一次 如何使这项工作有效 您想要的可能不仅仅需要 JavaSc
  • 网格视图数据绑定事件

    如何使用网格视图的数据绑定事件以及如何调用它有人可以详细说明一下吗 我像这样在按钮上绑定 gridview DataTable dt placedStudentManager GetPlacedStudentList sb passoutY
  • set.pop() 是确定性的吗?

    我知道 python 集合的元素是没有顺序的 调用pop方法返回任意元素 我对此很满意 我想知道当集合具有相同的历史记录时 pop 是否总是返回相同的元素 当然 在一个版本的 python 中 我不介意 python 的不同版本 实现是否做
  • 在 Android 密钥库中存储 hmac 密钥

    我使用下面的代码创建 hmac 密钥并将其作为字符串返回 KeyGenerator keyGen null try keyGen KeyGenerator getInstance HmacSHA256 catch NoSuchAlgorit
  • 如何使用目标接口将编译选项添加到 CMake FetchContent 依赖项

    我有一个使用 CMake 的依赖项FetchContent需要使用一些构建标志来构建 cmake DFLAG ON 这个问题也被问到here https stackoverflow com questions 68708076 how to
  • 在 Elastic Beanstalk 上运行 .config 文件?

    我正在尝试在我的弹性豆茎上运行自定义 config 文件 我正在按照以下说明进行操作这个链接 http www tonmoygoswami com 2013 05 how to enable gzip on amazon elastic h
  • 在 C# 中使用 RSA

    如何在 C 中使用 RSA 加密技术加密文本或任何其他媒体 我需要使用任何外部库还是有任何内置的东西 一个小示例代码会有所帮助 Use 系统 安全 加密 RSACryptoServiceProvider http msdn microsof
  • OpenShift action_hooks 不可执行

    当我在 OpenShift 中创建测试 DIY 应用程序时 action hooks工作正常 但现在我创建了一个实际的应用程序 当我推送更改时它们不会触发 我做了一些调查 发现了问题 由于某种原因 操作挂钩无法执行 我检查过 它们在测试应用
  • 在 C# 中无法获得与 Python 中相同的哈希值

    我有一个字符串 需要对其进行哈希处理才能访问 API API 创建者在 Python 中提供了一个 codenippet 它对代码进行哈希处理 如下所示 hashed string hashlib sha1 string to hash h
  • 定义 Netfilter 挂钩函数的正确方法是什么?

    我正在编写一个内核模块 更具体地说 一个网络过滤器模块 适用于 Linux 我试图使其与各种内核兼容 但入口功能给我带来了麻烦 从 LXR 中 我可以看到nf hookfntypedef 在内核 3 13 中发生了变化 Linux 3 12
  • PHP:将字符串中的前导零连接到个位数

    我有这个示例字符串 hello77boss2america 9 22 fr99ee 9 应在字符串的所有个位数前面添加前导 0 结果应该是 hello77boss02america 09 22 fr99ee 09 我尝试了下面的代码 str
  • 更改 Google Maps JavaScript API v3 圈外的地图不透明度

    所以我目前在地图上画了一个圆圈 var optionsCercle center latlang map map radius 1000 fillOpacity 0 1 strokeWeight 0 this circ new google