谷歌地图 API v3:在点击折线事件上的两个现有点之间的折线上添加点

2024-02-15

如何在单击折线事件上的两个现有点之间的折线上添加点? 谢谢你!


如果你只是在谈论一个Polyline只有 2 个点,您可以使用 a 的中心LatLngBounds http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds含有Polyline。 Google 地图 api v3 未实现Polyline.getBounds()不过,函数。所以你可以延长Polyline类包括一个getBounds功能:

google.maps.Polyline.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds();
  this.getPath().forEach(function(e) {
    bounds.extend(e);
  });
  return bounds;
};

Polyline.getBounds()在只有 2 个点的线上将包含包含该线的区域。该边界的中心应该是您的线的精确中心。如果Polyline包含超过 2 个点时,中心不会落在单击的线的中心,而是包含所有点的边界的中心。如果您想通过此功能使用多段折线,则需要更多的数学计算来计算单击了哪一段。

这是一个使用 2 点的小例子Polyline:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Right in Two</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
    <script type="text/javascript">

      function init() {
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.790234970864, -122.39031314844),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var points = [
                  new google.maps.LatLng(40.785533,-124.16748),
                  new google.maps.LatLng(32.700413,-115.469971)
        ];

        var line = new google.maps.Polyline({
          map: map,
          path: points,
          strokeColor: "#FF0000",
          strokeWeight: 2,
          strokeOpacity: 1.0
        });

        google.maps.Polyline.prototype.getBounds = function() {
          var bounds = new google.maps.LatLngBounds();
          this.getPath().forEach(function(e) {
            bounds.extend(e);
          });
          return bounds;
        };

        google.maps.event.addListener(line, 'click', function(e){
          var marker = new google.maps.Marker({
            map: map,
            position: line.getBounds().getCenter()
          });
        });

      };

      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图 API v3:在点击折线事件上的两个现有点之间的折线上添加点 的相关文章

随机推荐

  • Mac 版与 Github 分开安装 Git

    我已经安装了 Mac 版的 Github 我意识到我需要进入命令行来做一些事情 Mac 版 Github 中有一个选项可以安装命令行 所有这一切似乎都是在 usr local bin 中创建一个名为 Github 的别名 该别名指向 Mac
  • 如何使用material-ui框架? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我打算使用 Material UI CSS 框架 http material ui com http material ui com
  • 如何在 ASP.Net 中发送状态代码 500 并仍然写入响应?

    我有一个 ASP Net 单文件 Web 服务 ashx文件包含一个IHttpHandler实现 需要能够返回错误作为响应500内部服务器错误状态代码 在 PHP 中这是一件相对简单的事情 header HTTP 1 1 500 Inter
  • 如何配置WCF向客户端推送实时数据?

    我需要将实时更新从服务器发送到客户端 我知道WCF一般都可以做到这一点 然而 silverlight 是一个挑剔的客户 有谁知道如何配置WCF将实时更新发送到Silverlight客户端 来自配置和演练的片段将不胜感激 使用 WCF 回调
  • Ag 网格,防止表格缩放到全宽

    我有一个表格 即使其内容较少 也可以缩放到所有可用宽度 演示 https plnkr co edit 6L8bTAwkEV6R6Be4M1Qm p preview https plnkr co edit 6L8bTAwkEV6R6Be4M1
  • 存储社会安全号码

    我目前工作的公司的人力资源部门要求我提供一个系统 用于在公司数据库中存储员工的社会安全号码 这样做的原因是为了简化工资单的完成 因为我们使用内部软件来处理员工时间表 但必须与第三方软件集成来实现我们的实际工资单系统 这是一家相对较小的公司
  • ASP.Net 身份提供商请求太多信息

    我的 asp net 身份工作正常 但是 当用户登录时 Google 会询问用户是否可以提供以下信息 查看您的电子邮件地址 查看您帐户的基本信息 问题是我什至不想要这些信息 我只是想要一种独特的方式来识别用户 它确实提供了 我不希望用户认为
  • ''hello'' ++ ''world'' 在 Haskell 中不起作用

    只是想澄清一下 这是我第一天编程 我意识到这个问题是多么愚蠢 D 1 为什么不起作用 ghci gt hello world
  • 如何从泛型定义和泛型参数获取泛型类型?

    在 C 中 如何从泛型定义和泛型参数构造泛型类型 例如 var genericDefinition typeof List var genericArgument typeof string How can I get the Type i
  • kubernetes 事件时间表

    我希望能够在时间轴上看到 kube 集群发生的所有各种事情 包括何时发现节点已死亡 何时添加新节点 何时崩溃以及何时重新启动 到目前为止我们发现的最好的是kubectl get event但这似乎有一些限制 它不会回溯那么远 我不确定它回溯
  • Python中的凯撒密码:删除列表中的空格

    我正在从事凯撒密码项目 我获取用户的输入 将其转换为列表 删除空格 然后对字母进行加密 我的问题是 如何将这些空格重新添加到最终的加密消息中 这是我到目前为止所取得的成就 假装单词 消息 alphabet a b c d e f g h i
  • 如何修复 Subversion «!»地位

    Subversion 手册指出 物品丢失 例如您搬家或 没有使用 svn 就删除了它 这 也表明一个目录是 不完整 结账或更新 被打断 但正如 Subversion 经常出现的情况一样 没有说明如何解决该问题 通常 我会使用我信任的Fix
  • 是否有 OAuth2 与 WebFlux 的工作示例

    我正在尝试将 OAuth2 添加到 WebFlux 但找不到任何工作示例 为了实现自己的授权服务器 我使用这样的代码 EnableAuthorizationServer Configuration public class ServerAu
  • Facebook SDK:FBLoginView 重新授权发布流

    使用 FBLoginView 时调用 initWithReadPermission 后 我遇到重新授权发布流的问题 我尝试在委托函数内部调用 我可以在其中获取用户信息 在下一个对话框请求发布流权限后 应用程序向我抛出一个异常 com fac
  • SharePoint 初学者用户教程有什么好处? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 好吧 我的任务是为一个政府内部网站创建一个 wss v3 0 网站 但内部 SharePoint 经验很少 尽管这是一个 IT 部门 所以
  • 如何提取一些单元测试来分离gradle测试任务?

    假设我想将 Robolectric 测试与普通单元测试分开 并将它们作为单独的 gradle 任务运行 是否可以 我已经设法从单元测试中排除不需要的测试 android testOptions unitTests all exclude p
  • Linux内核AIO,开放系统调用

    为什么 Linux 内核 AIO 不支持异步 开放 系统调用 因为 打开 可能会长时间阻塞文件系统 不是吗 首先 这是一个非常好的 合理的问题 不幸的是 它可能会赶走比我更有知识的人 AFAICT 没有good原因 您设法挖掘的讨论是相关的
  • Rails 路由:我缺少什么?

    我的应用程序有票证 票证可以 解决 我可以通过 AJAX POST 到 resolve 操作 没有任何问题 但我无法通过普通的 HTML 表单 POST 我明白了No route matches tickets 321 resolve HT
  • 抽象泛型类采用本身派生自该类的类型参数

    您认为创建一个将派生自自身的类作为类型参数的抽象泛型类是可接受的还是不好的做法 这允许抽象泛型类操作派生类的实例 特别是根据需要创建派生类的 new 实例的能力 并且可以帮助避免在派生自它的具体类中重复代码 如果 不好 您更喜欢什么替代方案
  • 谷歌地图 API v3:在点击折线事件上的两个现有点之间的折线上添加点

    如何在单击折线事件上的两个现有点之间的折线上添加点 谢谢你 如果你只是在谈论一个Polyline只有 2 个点 您可以使用 a 的中心LatLngBounds http code google com apis maps documenta