Невозможно создать многоугольник с помощью API карт Google с координатами GPS, загруженными из текстового поля. - PullRequest
Новая
       55

Невозможно создать многоугольник с помощью API карт Google с координатами GPS, загруженными из текстового поля.

0 голосов
/ 15 октября 2019

Я работаю над интерактивной картой, используя API Google Maps. На карте есть плавающая панель с двумя текстовыми полями, в которые я пишу координаты GPS.

Затем я должен сделать маркер и сделать полигон из этих маркеров. Я могу сделать простую линию от последнего маркера до предыдущего маркера, но я не знаю, как сделать многоугольник.

Вот мой код:

HTML 

<div id="floating-panel">
  <input id="lat" type="text" value="">
  <input id="lng" type="text" value="">
  <input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>

CSS 

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

JS 

  var poly;
  var map;
  var myPolygon;
  var path = [];

  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
    ];

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: new google.maps.LatLng(49.8037633, 15.4749126),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    });

    poly = new google.maps.Polyline({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2
    });
    poly.setMap(map);

    var lengthPolyg = path.length;
    if(lengthPolyg > 2){
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    }
    myPolygon.setMap(map);
    //console.log(triangleCoords);

    document.getElementById('submit').addEventListener('click', function() {
    addLatLng();
    });
  }

  function addLatLng() {

    var inputLat = document.getElementById('lat').value;
    var inputLng = document.getElementById('lng').value;
    path = poly.getPath();

    var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

    path.push(curPosition);

    var marker = new google.maps.Marker({
      position: {lat: parseFloat(inputLat), lng: parseFloat(inputLng)},
      //title: '#' + path.getLength(),
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2P1rNcUTs9V_tOGPG6aOP0Wp6Xn-P6kc&callback=initMap">

1 Ответ

0 голосов
/ 15 октября 2019

Вы создаете полилинию, а не многоугольник (вы создаете многоугольник в подпрограмме initMap, только если путь полилинии больше 2, чего никогда не было в этой точке вашего кода). Переместите создание многоугольника в функцию addLatLng: 

function addLatLng() {
  var inputLat = document.getElementById('lat').value;
  var inputLng = document.getElementById('lng').value;
  path = poly.getPath();

  var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

  path.push(curPosition);
  var lengthPolyg = path.length;
  if (!myPolygon && lengthPolyg > 2) {
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    myPolygon.setMap(map);
  }
  if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(inputLat),
      lng: parseFloat(inputLng)
    },
    map: map
  });
}

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

var poly;
var map;
var myPolygon;
var path = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(49.8037633, 15.4749126),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  });
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('lat').value = evt.latLng.lat();
    document.getElementById('lng').value = evt.latLng.lng();
  })
  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2
  });
  document.getElementById('submit').addEventListener('click', function() {
    addLatLng();
  });
}

function addLatLng() {
  var inputLat = document.getElementById('lat').value;
  var inputLng = document.getElementById('lng').value;
  console.log(inputLat + "," + inputLng);
  path = poly.getPath();

  var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

  path.push(curPosition);
  var lengthPolyg = path.length;
  console.log(lengthPolyg);
  if (!myPolygon && lengthPolyg > 2) {
    console.log("create myPolygon " + path.length);
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    myPolygon.setMap(map);
  }
  if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(inputLat),
      lng: parseFloat(inputLng)
    },
    map: map
  });
}
#map {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="floating-panel">
  <input id="lat" type="text" value="">
  <input id="lng" type="text" value="">
  <input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
...