用于编辑谷歌地图折线的事件处理程序?

2023-04-18前端开发问题

本文介绍了用于编辑谷歌地图折线的事件处理程序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我正在寻找在您在 Google 地图中编辑折线时触发的事件，类似于标记上的拖动"事件.我找到了 'capturing_changed' 事件，但它似乎在 dragstart 和 dragend 上触发，而不是在 drag 上触发.因为我不得不重新发明轮子，允许拖动标记并根据标记的位置更新折线，基本上是重新发明可编辑的折线.我希望能够添加标记，可编辑的折线可以顺利完成，但我必须能够在拖动时检测到.我在 API 文档或 Google 搜索中找不到任何内容，所以我想我会在这里问.

I'm looking for an event that fires while you are editing a Polyline in Google Maps, similar to the 'drag' event on Markers. I've found the 'capturing_changed' event, but it seems to fire on dragstart and dragend, not on drag. As is I'm having to reinvent the wheel by allowing a Marker to be dragged and updating the Polyline based on where the Marker is, basically reinventing editable Polylines. I'd like to be able to add Markers, which editable Polylines do smoothly, but I have to be able to detect on drag. I can't find anything in the API documentation or on a Google search, so I thought I'd ask here.

推荐答案

文档中的简单折线示例修改为添加更改事件(insert_at、remove_at、set_at、dragend).

The simple Polyline example from the documentation modified to add events on changes (insert_at, remove_at, set_at, dragend).

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var flightPath = null;

      function initialize() {
        var myLatLng = new google.maps.LatLng(0, -180);
        var mapOptions = {
          zoom: 3,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var flightPlanCoordinates = [
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892)
        ];
        flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2,
          editable: true,
          draggable: true
        });
        google.maps.event.addListener(flightPath, "dragend", getPath);
        google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
        google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
        google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
        flightPath.setMap(map);
      }

function getPath() {
   var path = flightPath.getPath();
   var len = path.getLength();
   var coordStr = "";
   for (var i=0; i<len; i++) {
     coordStr += path.getAt(i).toUrlValue(6)+"<br>";
   }
   document.getElementById('path').innerHTML = coordStr;
}

    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas" style="height:500px; width:600px;"></div>
    <div id="path"></div>
  </body>
</html>

工作示例

代码片段:

var flightPath = null;

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: true,
    draggable: true
  });
  google.maps.event.addListener(flightPath, "dragend", getPath);
  google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
  google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
  google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
  flightPath.setMap(map);
}

function getPath() {
  var path = flightPath.getPath();
  var len = path.getLength();
  var coordStr = "";
  for (var i = 0; i < len; i++) {
    coordStr += path.getAt(i).toUrlValue(6) + "<br>";
  }
  document.getElementById('path').innerHTML = coordStr;
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="path"></div>
<div id="map-canvas" style="height:500px; width:600px;"></div>

这篇关于用于编辑谷歌地图折线的事件处理程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源