0

我正在尝试将数据从 firebase 检索到嵌入了 yandex 地图的 html 页面。一切都很好，数据来了，但问题是数据是在地图渲染之后来的，所以任何标记都会显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://www.gstatic.com/firebasejs/5.1.0/firebase.js"></script>
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug"></script>
  <!-- connect to firebase and fetch data from there -->
  <script src="./js/firebase.js"></script>
  <!-- load array from file-->
  <!-- <script src="./js/arr.js"></script> -->  
    <title>Page Title</title>
  </head>
  <body>  
  <!-- map here -->
  <div id="map" style="width:800px; height:600px"></div>      
  <!-- markers go into map -->
  <script src="./js/map.js"></script>
</body>
</html>

firebase.js

// Initialize Firebase
var config = {
 ...
};
firebase.initializeApp(config);
var firebaseDB = firebase.database();
var arr = []

firebaseDB.ref('arr').once('value')
.then((snap) => {
  snap.forEach((item) => {
    arr.push({
      id: item.key,
      ...item.val() 
    })
    console.log('item pushed to arr'); //fires after map rendered
  })
  console.log('arr', arr); // full of data , but too late
})

地图.js

ymaps.ready(init);
var myMap; 

function init() {

myMap = new ymaps.Map("map", {
  center: [56.18, 56.23],
  zoom: 4,
  controls: ['routeButtonControl'],
  behaviors: ['drag']
});

var BalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass('<h3>{{ properties.name }}</h3>');


console.log(arr) // I want it here be filled with data already, but  it is empty (( 

arr.forEach(function (m) {
  var marker = new ymaps.Placemark(
    [m.coords.lat, m.coords.lon],
    {
      name: m.name,
      address: m.address,
      phone: m.phone,
    },
    { balloonContentLayout: BalloonContentLayoutClass }
  );
  myMap.geoObjects.add(marker);
  console.log('marker added')
  });
};

试图将地图放置function(init)在firebase的.then()promice中，但没有成功。

尝试async与 firebase 库脚本加载一起使用-同样的运气。

当从本地 js 文件 (arr.js) 加载相同的结构化数据时 - 一切正常：加载、显示、闪亮。提前致谢

4

0 回答 0