javascript - 在 Mappa .Js 中映射纬度和经度数组

Question

所以我有一个.csv地址文件，我想使用 Mappa .Js 进行映射。

我正在使用谷歌地理编码来转换这些地址并将它们放入一个数组中。我成功地做到了，但是当我将数组传递给我的drawPoints()函数时，没有一个点被映射。我console.logged的数组和所有点似乎都正确地通过了，只是没有映射。

我想要发生的事情：

当我调用该函数时，我希望在每个存储在传递给函数的数组中的坐标drawPoints()处绘制一个椭圆。目前正在传递的数组包含两个值，一个纬度和经度。但是当我尝试映射数组时，地图上没有显示任何椭圆。latlnglatlng

这是我的代码：

let DeliveryData;

const mappa = new Mappa('Leaflet');
let myMap;
let canvas;

const options = {
  lat: 32.7534,
  lng: -55.1108,
  zoom: 10,
  style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

function preload(){
  DeliveryData = loadTable('Delivery_Data.csv', 'header')
}

function setup(){
  createCanvas(600,600);

  for(let row of DeliveryData.rows){
    //console.log(row.get('Deliver To'));
  }

  var promises = [];
  for(let row of DeliveryData.rows){
    console.log(row.get('Deliver To'));
      var address = row.get('Deliver To');
      var latlng = [];
      promises.push(geocode(address));
    }
    Promise.all(promises).then((latlngs) => {
      draw(latlngs);
    }).catch((err) => {
        console.log(err);
    })
    canvas = createCanvas(400, 400);
    myMap = mappa.tileMap(options);

    myMap.overlay(canvas);
}

function geocode(address){
      return new Promise((fulfill, reject) => {
          var location = address;

          axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
            params:{
              address:location,
              key:'[My GEOCODING API KEY]'
            }
          })
          .then(function(response){
            // Log full response
            //console.log(response);

            // Geometry
            var lat = response.data.results[0].geometry.location.lat;
            var lng = response.data.results[0].geometry.location.lng;

            latlng = [lat, lng]

            //console.log(latlng);
            drawPoints(latlng);
            fulfill(latlng);
          })
          .catch(function(error){
              reject(error);
            console.log(error);
          });
      });
    }

    function drawPoints(latlng) {
    // Get the lat/lng of each meteorite
    console.log(latlng);
    var latitude = Number(latlng[0]);
    var longitude = Number(latlng[1]);

      // Transform lat/lng to pixel position
      var pos = myMap.latLngToPixel(latitude, longitude);

      ellipse(pos.x, pos.y, 10, 10);
      fill(255, 0,0,135);
    }


function draw() {
//   clear();
// //Every Frame, get the canvas position
// var testPoint = myMap.latLngToPixel(51.7534, -26.1108);
// ellipse(testPoint.x, testPoint.y, 10, 10);
// fill(255, 0,0,135);
}

标签： javascriptarraysgeocodingp5.js