从用户输入的顶点绘制多边形 google maps api答案

【问题标题】：draw polygon from user entered vertices google maps api从用户输入的顶点绘制多边形 google maps api
【发布时间】：2012-05-22 11:16:37
【问题描述】：

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

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

最好的方法是什么。

非常感谢您的帮助

【问题讨论】：

建议你看看Polygon section of the Developer's Guide和Polygon API Docs。

标签： google-maps google-maps-api-3 polygon

【解决方案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

【讨论】：