Question

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

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

最好的方法是什么。

非常感谢您的帮助

Answer 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

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

1 个答案: