0

我的 Web 应用程序上有一个文本区域，允许用户输入多边形的顶点。我想实现一个按钮，单击该按钮时，将在谷歌地图中绘制一个带有输入顶点的多边形。顶点将始终采用以下格式：

25.82024674666931, 55.66104912743973,
25.54465656761206, 48.11048789757425,
25.22561664287819, 5.57756899014949,
25.47485219998054, 26.21461743851616

最好的方法是什么。

非常感谢您的帮助

4

1 回答 1

1

如果您相信输入始终是干净的，那么这只是几个步骤，没有复杂性。

首先，将逗号分隔的文本转换为 LatLngs 数组。

  function textToLatLngs(text) {
    var dots = text.value.split(",");
    var latLngs = [];
    for(var i = 0; i < dots.length; i += 2) {
      latLngs[i/2] = new google.maps.LatLng(parseFloat(dots[i]),
                       parseFloat(dots[i+1]));
    }
    return latLngs;
  }

接下来，您可以使用 LatLngs 定义一个多边形：

  function drawPolygon(vertices) {
    var polygon = new google.maps.Polygon({
      strokeColor: "#f33",
      fillColor: "#fce",
      paths: vertices,
      map: map
    });
  }

最后，将 HTML 和 Javascript 与事件监听器链接起来（我把我的放在了initialize()）

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(25.0, 25.0),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addDomListener(
      document.getElementById("button1"), 
      'click',
      function() {
        drawPolygon(textToLatLngs(document.getElementById('coordsinput')));
      });
  }

使用 HTML 表单，例如：

      <form id="form">
        <input id="button1" type="button" value="get polygon">
        <br /><br />
        <textarea id="coordsinput" cols="22" rows="20">
        25.82024674666931, 55.66104912743973,
        25.54465656761206, 48.11048789757425,
        25.22561664287819, 5.57756899014949,
        25.47485219998054, 26.21461743851616
    </textarea>
      </form>

每次单击按钮时，该按钮都会绘制新的多边形。如果您只想移动单个多边形，则需要在单击按钮时调用 setPaths。

http://jsbin.com/enepis/edit#preview

于 2012-05-22T15:06:35.703 回答