当前位置：文江博客话题详情

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

发布于 2024-09-15 05:32:59 字数 38 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

×纯※雪 2024-09-22 05:32:59

如果您只是谈论只有 2 个点的 Polyline，则可以使用 LatLngBounds 包含折线。不过，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;
};

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

这是一个使用 2 点折线的小示例：

<!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>

If you are just talking about a Polyline with only 2 points, you could use the center of a LatLngBounds containing the Polyline. Google maps api v3 doesn't implement the Polyline.getBounds() function, though. So you can extend the Polyline class to include a getBounds function:

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

Polyline.getBounds() on a line with only 2 points will contain the area to include this line. The center of this bounds should be the exact center of your line. If the Polyline includes more than 2 points, the center will not fall on the center of the line clicked, but the center of the bounds that includes all points. If you want to use mutli-segment Polylines with this function, it will take more math to calculate which segment was clicked.

Here is a small example using a 2 point 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>

回复收藏 0 原文