Javascript 无法使用从文本字段加载GPS坐标的google maps api生成多边形

我正在使用谷歌地图api开发交互式地图。地图有一个浮动面板，其中有两个文本字段，我正在其中写入GPS坐标

然后我要做一个标记，然后用这些标记做一个多边形。我可以从上一个标记到上一个标记画一条简单的线，但我不知道如何画多边形

这是我的密码：

HTML

CSS

#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}

JS

var-poly；
var映射；
多角形；
var路径=[]；
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}
];
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：新google.maps.LatLng（49.80376315.4749126），
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控制：错误
});
poly=新的google.maps.Polyline({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2
});
poly.setMap（map）；
var lengthPolyg=路径长度；
如果（长度多边形>2）{
myPolygon=新建google.maps.Polygon({
路径：路径，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35
});
}
myPolygon.setMap（map）；
//console.log（三角门）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
addLatLng（）；
});
}
函数addLatLng（）{
var inputLat=document.getElementById（'lat'）.value；
var inputLng=document.getElementById（'lng'）。值；
path=poly.getPath（）；
var curPosition=new google.maps.LatLng（parseFloat（inputLat），parseFloat（inputLng））；
路径推（curPosition）；
var marker=new google.maps.marker({
位置：{lat:parseFloat（inputLat），lng:parseFloat（inputLng）}，
//标题：“#”+path.getLength（），
地图：地图
});
}

您正在创建一条多段线，而不是多边形（如果多段线的路径大于2，则仅在

initMap

例程中创建多边形，而在代码中，该路径从未位于该点）。将多边形的创建移动到

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
  });
}

代码片段：

var-poly；
var映射；
多角形；
var路径=[]；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：新google.maps.LatLng（49.80376315.4749126），
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控制：错误
});
google.maps.event.addListener（映射，'click'，函数（evt）{
document.getElementById（'lat'）。value=evt.latLng.lat（）；
document.getElementById（'lng'）。value=evt.latLng.lng（）；
})
poly=新的google.maps.Polyline({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2
});
document.getElementById（'submit'）。addEventListener（'click'，function（）{
addLatLng（）；
});
}
函数addLatLng（）{
var inputLat=document.getElementById（'lat'）.value；
var inputLng=document.getElementById（'lng'）。值；
控制台日志（inputLat+”，“+inputLng）；
path=poly.getPath（）；
var curPosition=new google.maps.LatLng（parseFloat（inputLat），parseFloat（inputLng））；
路径推（curPosition）；
var lengthPolyg=路径长度；
控制台日志（lengthPolyg）；
如果（！myPolygon&&lengthPolyg>2）{
log（“创建myPolygon”+path.length）；
myPolygon=新建google.maps.Polygon({
路径：路径，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35
});
myPolygon.setMap（map）；
}
if（！！myPolygon&&myPolygon.setPath）myPolygon.setPath（path）；
var marker=new google.maps.marker({
职位：{
lat:parseFloat（inputLat），
lng:parseFloat（输入lng）
},
地图：地图
});
}

#地图{
身高：80%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

您是否出于任何原因使用

if（！！myPolygon）

而不是

if（myPolygon）

？个人偏好。

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

  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">

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
  });
}