Question

我正在尝试制作一个javascript函数，你必须输入最小3点的坐标，你在谷歌地图上看到它（绘制）。该脚本存在一些问题。

它不会在坐标之间打印空间，也不会在地图上绘制区域。

以下是我认为没有任何问题的HTML代码。

<html>
<head>
  <meta charset="utf-8">
  <title>Plot area</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>
<br>
<div id="panel">
  <textarea id="lat" type="text"></textarea>
    <br>
      <input type="button" value="Plot area" onclick="codeLatLng()">
    </div>
  <br>
    <div id="map-canvas"></div>
</body>
</html>

这里是我认为问题所在的JS代码。

var map;
var infoWindow;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436412, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

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

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = latlng;

  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();
}

//plot area
function codeLatLng() {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

/** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

提前谢谢。

Answer 1

您不需要地理编码器，除非您需要标记的地址
你需要解析字符串以将其分解为坐标（在＆＃34;＆＃34;（空格字符，或任何你想用作坐标之间的分隔符），然后将这些坐标解析为组件（在＆＃34;，＆＃34;）
如果要使用它们来显示多边形

working fiddle

var map;
var infoWindow;
var geocoder = new google.maps.Geocoder();
var bermudaTriangle = new google.maps.Polygon({});

function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(24.886436412, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    // Define the LatLng coordinates for the polygon.
    var triangleCoords = latlng;
    infoWindow = new google.maps.InfoWindow();
}

//plot area
function codeLatLng() {
    bermudaTriangle.setMap(null);
    var path = [];
    var bounds = new google.maps.LatLngBounds();
    var input = document.getElementById('latlng').value;
    var coordArray = input.split(' ');
    for (var i = 0; i < coordArray.length; i++) {

        var latlngStr = coordArray[i].split(',', 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var latlng = new google.maps.LatLng(lat, lng);
        path.push(latlng);
        bounds.extend(latlng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
    }
    map.fitBounds(bounds);
    // Construct the polygon.
    bermudaTriangle = new google.maps.Polygon({
        paths: [path],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);

    // Add a listener for the click event.
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
}

输入纬度和经度以从textarea绘制多边形

1 个答案: