提前感谢您的帮助!我在代码中全局声明了四个数组。然后,在从csv读取数据的函数中,我将数据值赋给数组元素。然而,数组元素在这个函数之外是未定义的,我似乎找不到问题所在……我正在使用d3版本7()和谷歌MapJavaScript API。
我的CSV文件格式为Project_Name,Artist,Lat,Long -大约有300个值。
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { LatLng } = await google.maps.importLibrary("core");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
//Global Vars
let map;
let projectName = [];
let artist = [];
let lat = [];
let long = [];
let markers = [];
async function data() {
d3.csv("/data/single.csv", function(d) {
return {
projectName: +d.Project_Name,
artist: +d.Artist,
lat: +d.Latitude,
long: +d.Longitude,
}
}).then(function(d) {
for (var i = 0; i < d.length; i++) {
projectName[i] = d[i].Project_Name;
artist[i] = d[i].Artist;
lat[i] = parseFloat(d[i].Latitude);
long[i] = parseFloat(d[i].Longitude);
}
});
}
function createMarkers(m){
for (var z=0; z < lat.length; z++) {
markers[z] = new google.maps.Marker({
position: new google.maps.LatLng(lat[z], long[z]),
map: m,
title: projectName[z],
});
}
}
async function initMap() {
const map = new Map(document.getElementById("map"), {
zoom: 11,
center: { lat: 37.4239163, lng: -122.0947209 },
mapId: "[MAP ID]",
mapTypeControl: false,
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
//READ CSV FILE
data();
//MARKERS
createMarkers(map);
}
initMap();
字符串
我试过使用await,但没有解决问题。还尝试使用setTimeout,结果是NaN而不是undefined。
1条答案
按热度按时间x3naxklr1#
d3.csv
是异步的。您想等待某个地方,这是正确的想法,但您必须等待d3.csv
promise。如果你想“等待”数据被填充,你必须返回d3.csv
promise:字符串
然后在调用
createMarkers();
之前等待数据函数:型