半径/最近结果 - Google 地图 API

2023-12-02

首先,我使用 Google Maps API v3。我有一张大地图,显示从数据库中提取的所有结果,现在我想实现一个功能,显示距当前位置 X 公里内最近结果的半径(由 HTML5 地理定位提供)。

由于地图包含所有结果,我希望能够添加X公里,然后它将提交,结果将根据用户当前位置返回最近的结果。然后整个地图应该删除所有半径外标记,留下 X 公里半径内的标记。

我正在请求有关如何执行此操作的有效代码、教程或文章。


这里的JSFiddle 演示:

我想这是一种方法。您可以使用Google Map V3 API 的圈子从您的中心点或当前位置创建边界。您可以使用以下命令指定圆的半径(以米为单位)setRadius(radius:number)。使用创建的圆圈,您可以循环遍历标记并使用以下命令查看它们是否在圆圈的边界内Circle 的 getBounds 对象是一个 LatLngBounds并检查标记是否在范围内。

我继续创建了一个小演示,该演示在地图上有五个点,当您单击“创建圆形”按钮时,它将使第一个标记成为中心点,并绘制一个半径为 5000 的圆形,并过滤掉那些标记不使用上述方法进行绑定:

function createRadius(dist) {
    var myCircle = new google.maps.Circle({
        center: markerArray[markerArray.length - 1].getPosition(),
        map: map,
        radius: dist,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    var myBounds = myCircle.getBounds();

    //filters markers
    for(var i=markerArray.length;i--;){
         if(!myBounds.contains(markerArray[i].getPosition()))
             markerArray[i].setMap(null);
    }
    map.setCenter(markerArray[markerArray.length - 1].getPosition());
    map.setZoom(map.getZoom()+1);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

半径/最近结果 - Google 地图 API 的相关文章

  • WordPress 子主题覆盖父主题包括

    我正在创建 WordPress 子主题 需要覆盖某些小部件模板 我正在尝试使用此方法来覆盖父主题调用 覆盖主题功能的正确方法 http www venutip com content right way override theme fun
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • 如何下载临时文件

    我正在尝试创建一个简短的 PHP 脚本 该脚本采用 JSON 字符串 将其转换为 CSV 格式 使用fputcsv 并使该 CSV 可作为下载的 csv 文件使用 我的想法是使用tmpfile 不用担心 cronjobs 或磁盘空间不足 但
  • 验证 LDAPS 连接的自签名证书

    我想从 Linux Linux 3 2 0 4 amd64 1 SMP Debian 3 2 51 1 x86 64 GNU Linux 客户端到 Windows 2012 服务器建立安全的 ldap 连接 ldaps 以更改活动中的用户密
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 从 URL 任何文件类型创建图像

    我知道imagecreatefromgif https www php net manual en function imagecreatefromgif php imagecreatefromjpeg https www php net
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • MySQL如何从多个表中获取数据

    我正在寻找 php MySQL jquery 的帮助 我有2张桌子 table1表 1 有 4 列 id 标题 desc thumb img tabel2表 2 有 3 列 id 表 id img 我只想将 2 个表与 get QS 的值进
  • 从网页运行 ClickOnce 应用程序,无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik
  • 无法访问 WordPress 中声明的全局变量

    我有以下代码 g value something print g value function get value global g value print g value print get value 当我在独立的 PHP 脚本中运行它
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 如何缩短 PHP if 语句?

    我有一个 if 语句 我需要将单个字符串与许多不同的选项进行比较 我在下面发布的代码非常清楚地表明了我的意思 我知道有两种方法可以做到这一点 但另一种甚至更长 那么 是否有任何函数可以以更短的方式实现类似的功能 我的要求可能看起来很愚蠢 但
  • 通过 Facebook 图 api 点赞帖子

    你好 我对 facebook PHP SDK 没有什么问题 我想通过 facebook PHP SDK 点赞帖子或其他内容 我正在执行此代码 我认为它应该是正确的 但显然它不起作用 给定的错误代码是的 PHP SDK不知道这种POST请求
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse
  • MySqlConnectionStringBuilder - 使用证书连接

    我正在尝试连接到 Google Cloud Sql 这是一个 MySql 解决方案 我能够使用 MySql Workbench 进行连接 我如何使用 C 连接MySqlConnectionStringBuilder 我找不到提供这三个证书的

随机推荐

  • 基于 SQL 集的范围

    如何让 SQL 在不循环的情况下重复某些基于集合的操作任意次数 如何让 SQL 对一系列数字执行操作 我基本上是在寻找一种方法来执行基于集合的 for 循环 我知道我可以创建一个包含整数的小表 例如从 1 到 1000 然后将其用于该范围内
  • 如何在使用集合时将项目添加到集合中?

    下面的示例抛出 InvalidOperationException 集合已修改 枚举操作可能无法执行 执行代码时 var urls new List
  • Android WebView在查看html嵌套列表时加载空白

    我正在尝试使用 Android 将大小合理的 html 嵌套列表加载到 WebView 中 问题是当我尝试加载 html 时 它看起来是空白的 现在我已经尝试了几种不同的方法 我首先尝试了 W3Schools Try It Yourself
  • 是否可以在变量中获取 Phalcon\Mvc\View 渲染输出?

    我需要返回 json 对象 该对象具有带有渲染操作的属性 html 是否可以使用 Phalcon vew 进行本地操作 Example posts NewsPost find limit gt 10 view new Phalcon Mvc
  • ImportError:pyInstaller 之后没有名为“tkinter”的模块

    我想做一个可执行文件 但每次运行 exe 时它都会写入ImportError No module named tkinter 以及我在 Stack Overflow 上读到的所有内容都对我没有帮助 我的 python 程序很简单 ODE 求
  • 当我尝试创建触发器时 PostgreSQL 出现语法错误

    我想在 PostgreSQL 中创建触发器 逻辑很简单 我需要触发器 如果 published at更新并且writing at为空 则将published at设置为writing at 我写了这个 但失败了 有人有想法吗 CREATE
  • 为每个子图提供标题 - R Shiny

    我正在尝试使用 blondeclover 的以下代码创建绘图 代码如下 library shiny library ggplot2 library plotly library grid shinyApp ui ui fluidPage f
  • Google 柱形图单个日期和值显示为多个相邻条

    数据表结构如下 cols id label Date pattern type date id Col1 label Col1 Label pattern type number rows c v Date 2017 5 27 v 213
  • WebDriver 关闭弹出窗口

    我的网络驱动程序测试因出现弹出窗口而卡住 我如何在测试中关闭它 这是我的代码 Test public void canGoToSomePage throws Exception final WebDriver webDriver getFi
  • Activity崩溃后如何自动重启?

    有没有办法让我创建一个服务来跟踪我的活动类并在崩溃后重新启动它 请注意 我不能使用未捕获的处理程序线程方法来重新启动我的应用程序 我的应用程序应该会崩溃 不用担心那部分 我的应用程序很简单 就像这样 private class AudioR
  • 替换 MS SQL Server 中的特定 Unicode 字符

    我正在使用 MS SQL Server Express 2012 我在删除 unicode 字符时遇到问题U 02CC 十进制 716 在网格结果中 原文是 e r 我像这样尝试过 它不起作用 SELECT ColumnTextWithUn
  • 最简单的 MySQL 到 MySQLi 过渡

    我目前正在使用我在课堂上教授的已贬值的MySQL 我发现这不是正确的方法 有两个更好的选择 MySQLi 和更好的 PDO 虽然我发现切换到 PDO 对我来说有点困难 因为我对 OOP 一无所知 但我认为至少切换到 MySQLi 是必须的
  • 修复“包含重复的‘编译’项目。” Visual Studio 中的错误

    这是一个非常烦人的 VS 错误 我使用的是 VS 2019 16 8 1 我花了很多时间来修复它 包含重复的 编译 项目 NET SDK 包括 默认情况下从项目目录 编译 项目 你可以 从项目文件中删除这些项目 或设置 如果需要 可将 En
  • MySQL变量存储数据库名称

    我有一个很长的脚本 需要在几个不同的数据库上运行 所有数据库都具有相同的表和字段名称 我想做的是这样的 1 SET TARGET DATABASE beta 2 SET SOURCE DATABASE sandbox 3 4 CREATE
  • 通过 Chrome 上的 KBX 扩展程序安装时 Kynetx 应用程序无法运行

    我的应用程序正在加载外部 javascript 文件jQuery getScript 当我使用书签或扩展程序启动应用程序时 一切正常 当应用程序通过 KBX 安装时 虽然在内部Chrome与KBX扩展javascript 文件中包含的函数无
  • 如何在asp.net中实现文件下载

    使用 asp net 2 0 从网页实现下载操作的最佳方法是什么 操作的日志文件在名为 Application Root Logs 的目录中创建 我有完整路径并想提供一个按钮 单击该按钮会将日志文件从 IIS 服务器下载到用户本地电脑 这有
  • 购物车表如何与另一个表关联?

    我有表 table name id cart token data created at Updated at 想要使用令牌列 table name cart token cart token 与商店购物车表关联 只要购物车表没有 Cart
  • mysql 自然排序

    我有像这样的桌子server id name ip 当我尝试按名称对结果进行排序时 我得到 srv1 srv10 srv11 srv2 srv6 但我需要像这样的结果srv1 srv2 srv6 srv10 srv11 我知道的一个想法是
  • ORA-01855: 上午/上午或下午/下午必需的

    我收到错误 ORA 01855 AM A M or PM P M required 当我尝试执行以下查询时 INSERT INTO TBL ID START DATE values 123 TO DATE 3 13 2012 9 22 00
  • 半径/最近结果 - Google 地图 API

    首先 我使用 Google Maps API v3 我有一张大地图 显示从数据库中提取的所有结果 现在我想实现一个功能 显示距当前位置 X 公里内最近结果的半径 由 HTML5 地理定位提供 由于地图包含所有结果 我希望能够添加X公里 然后