Question

我正在努力制作一个路线规划器，允许用户点击地图上的随机点并创建路线。现在我在将值输入折线变量时遇到了一些麻烦我在google上搜索过，但我似乎无法找到一种方法来继续在现有值之上添加值。这些值来自地图上的click事件。

那么如何在每次点击事件中为具有相同格式的变量添加值？

function initMap() {
  var location = {
    lat: 51.3554957,
    lng: 5.4533268000000135
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: location
  });

  google.maps.event.addListener(map, "click", function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log(latitude + ', ' + longitude);
  });

  var flightPlanCoordinates = [{
      lat: 37.772,
      lng: -122.214
    },
    {
      lat: 21.291,
      lng: -157.821
    },
    {
      lat: -18.142,
      lng: 178.431
    },
    {
      lat: -27.467,
      lng: 153.027
    }
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

}

<!DOCTYPE html>
<html>

<head>
  <style>
    #map {
      height: 600px;
      width: 100%;
    }
  </style>
</head>

<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
  </script>
</body>

</html>

预期结果（4次点击）：

var flightPlanCoordinates = [{
  lat: 37.772,
  lng: -122.214
},
{
  lat: 21.291,
  lng: -157.821
},
{
  lat: -18.142,
  lng: 178.431
},
{
  lat: -27.467,
  lng: 153.027
}
];

提前致谢！

Answer 1

看看以下内容：

function initMap() {

  var flightPlanCoordinates = [];

  var location = {
    lat: 51.3554957,
    lng: 5.4533268000000135
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: location
  });

  google.maps.event.addListener(map, "click", function(event) {

    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();        
    console.log(latitude + ', ' + longitude);
    flightPlanCoordinates.push({lat: latitude, lng: longitude});

    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);

  });      

}

<!DOCTYPE html>
<html>

<head>
  <style>
    #map {
      height: 600px;
      width: 100%;
    }
  </style>
</head>

<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
  </script>
</body>

</html>

使用click事件中的值填充变量

1 个答案: