google-maps-api-3 - 谷歌地图 api v3 : add point on polyline between two existing points on click polyline event-6ren

google-maps-api-3 - 谷歌地图 api v3 : add point on polyline between two existing points on click polyline event

转载作者：行者123 更新时间：2023-12-04 07:51:02

25

4

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

最佳答案

如果您只是在谈论 Polyline只有 2 个点，您可以使用 LatLngBounds 的中心包含 Polyline . Google maps 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>

关于google-maps-api-3 - 谷歌地图 api v3 : add point on polyline between two existing points on click polyline event，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3529902/

25

4

0

文章推荐： internet-explorer - IE 无法下载带有 unicode 路径名的 bmp 文件

git add * (asterisk) vs git add . (period)(Git Add*(星号)与Git Add。(句号))
I have a question about adding files in git. I have found multiple stackoverflow questions about
c# - Visual Studio : Add Item/Add as link rather than just Add
我是 visual studio 的新手，来自 Delphi。我有一个充满 .cs 文件的目录树(根是\Common)。我还有一个充满应用程序的目录树(根目录是\Applications) 最后，
java - 为什么 ArrayList add() 和 add(int index, E) 复杂度是摊销常数时间？为什么 add() 不是 O(1)，add(int index, E) 不是 O(n)？
这个问题在这里已经有了答案: Array's lookup time complexity vs. how it is stored (4 个答案) Time complexity for java
sql - MySQL: `... ADD INDEX(a); ... ADD INDEX(b);` 和 `... ADD INDEX(a,b);` 之间的区别？
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
java - getChildren() add() 和 add()
为什么有时我们使用 getChildren() add() 而其他时候我们直接使用 add() es: https://docs.oracle.com/javafx/2/get_started/for
css - Bootstrap : add add-on below input
如何使用 bootstrap css 在输入下方添加跨度？我需要做这样的事情: 最佳答案是这样的吗？ http://jsfiddle.net/swm53ran/205/ 您可以使用纯 CSS 来实现
python - numpy - (np.add(X, Y, out=X); np.add(X, Y, out=X)) 在 np.add(X, 2*Y, out=X)
问题 np.add(X, 2*Y, out=X) 比 np.add(X, Y, out=X); np.add(X, Y, out=X).使用 np.add(X, Y, out=X); 是一种实际做法吗
git - 如何撤消 `` git add --intent-to-add``
当我跑 git add --intent-to-add .所有未跟踪的文件将其状态从“未跟踪的文件”( git status -s 显示 ?? )更改为“未暂存以进行提交的更改”( git statu
dart - add 和 sink.add 有什么区别？
我不知道 .add 之间有什么区别和 .sink.add ? 例子: StreamController myStreamController = StreamController(); stream
java - getContentPane().add() 和 add() 的意思一样吗
getContentPane().add() 和 add() 的意思一样吗？ public class TestFrame extends JFrame{ public TestFrame()
git - 对于初始提交， "add ."和 "add *"是同义词吗？
git add . 和 git add * 会完成完全相同的事情吗？最佳答案不，不会。 * 是一个 glob 模式，不会匹配以开头的文件。例如，假设这是当前目录，我有 2 个新文件要添加 fo
git add -A 和 git add . 的区别详解
git的分支与合并的两种方法 git add -A和 git add . git add -u在功能上看似很相近，但还是存在一点差别 git add . ：他会
git - "git add -A"和 "git add ."之间的区别
git add [--all | -A] 之间有什么区别？和 git add . ？最佳答案此答案仅适用于 Git 版本 1.x。对于 Git 版本 2.x，请参阅其他答案。总结: git ad
Wix 工具集 : cannot add Excel Add-in project reference
我刚刚安装了最新的 Wix v3.7。我创建了一个 VS 2010“Excel 2010 加载项”项目，并在同一个解决方案中创建了一个 Wix“安装项目”。问题是，当我尝试从 Wix 项目中引用 A
javascript - YUI.add 和 YUI().add 的区别
YUI.add 和 YUI().add 有什么区别？最佳答案在第一种情况下，您要注册一个模块可以加载到 YUI 沙箱中，在第二种情况下，您要构建一个沙箱，然后进行注册(这是一种非常不典型的用法)。
javascript - "How do I add items to a list and then add to the empty space below?"
测试代码时，任何输入到列表中的值在按下“enter”后都会消失。我对编程和网络开发非常陌生。请具体一点，以便我理解。 function addItem(){ var item = documen
python - BINARY ADD 和 INPLACE ADD 的区别
我正在浏览 python 的 dis 包。我尝试了代码以查看它是如何工作的 >>> def get(): ... x=4 ... y=x+3 ............ this lin
git - 如果我在开始时执行 "add"，我应该 "add ."git 中的每个新文件吗？
我已经对我的文件夹进行了版本控制 git init git add . git commit -m 'Initial commit' 我应该怎么做 git add 对于我在 .? 中创建的每个新文件
git - $ git add --all 与 $ git add * 之间的区别？
当我执行 $ git add * 时，有时我意识到 git 不会将已删除的文件添加到舞台上，如果删除或添加它，我需要手动指示，但我想不通找出 $ git add --all 有什么区别。因此，如果星号
git - 什么时候使用 "git add ."什么时候使用 "git add -A"
这个问题在这里已经有了答案: Difference between "git add -A" and "git add ." (12 个答案) 关闭 6 年前。目前，当我想提交并将内容推送到远程

首页

博学

6Ren·AI

商城

google-maps-api-3 - 谷歌地图 api v3 : add point on polyline between two existing points on click polyline event