Я очень новичок в разработке, только что закончил сетевой загрузочный лагерь на Udemy и создал несколько простых веб-сайтов, приложение типа yelp и несколько других незначительных проектов кодирования.
В настоящее время я работаю над "«Карта путешествий», которая позволит пользователям добавлять страны, которые они посетили, и отображает карту, на которой выделены страны, в которых они были.
Я работаю с node.js mongodb и mongoose.
После некоторых исследований я решил использовать геокарту API карт Google (визуализация).
Карта хорошо отображается на странице, и любая добавленная страна выделяется, как и ожидалось.
Я пытаюсь выяснить, как взять данные из mongodb и заполнить «var data». Это должно быть динамическим, поскольку данные будут отличаться в зависимости от пользователя, который вошел в систему.
В настоящее время у меня есть следующий код в моем header.ejs внутри, чтобы связать API и мой файл javascript внешнего интерфейса. :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/javascript/script.js"></script>
Только одна строка в моем файле index.ejs:
<div id="regions_div" style="width: 900px; height: 500px;"></div>
И следующее в моем файле script.js:
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
//the data has to go here
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}