Javascript Firebase&；谷歌地图-读取数据并创建标记。如何读取对象？
我正在开发一个应用程序，其中包含大量废物的信号装置，每个公民都可以通知当局收集废物的地点 数据（地址和坐标）存储在firebase中，我正在谷歌地图上显示标记 代码如下：Javascript Firebase&；谷歌地图-读取数据并创建标记。如何读取对象？,javascript,google-maps,firebase,firebase-realtime-database,Javascript,Google Maps,Firebase,Firebase Realtime Database,我正在开发一个应用程序，其中包含大量废物的信号装置，每个公民都可以通知当局收集废物的地点 数据（地址和坐标）存储在firebase中，我正在谷歌地图上显示标记 代码如下： jQuery(function($) { // Asynchronously Load the map API var script = document.createElement('script'); script.src = "//maps.googleapis.com/maps/api/js
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
markers: findMarkers();
console.log(markers);
console.log(markers.length);
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<p>' + 'adresse' +'</p>' + '</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
function findMarkers(){
markers = [];
var data = firebase.database();
var dataRef = firebase.database().ref("signalement/");
dataRef.on("child_added", function(data) {
var key = data.key;
const signalement = data.val();
const adresse = signalement.adresse;
const coordonnees = signalement.coordonnees;
var marker = [adresse, coordonnees];
markers.push( marker );
});
// Multiple Markers
return markers;
}
</script>
</head>
<body>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
</html>
jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=“//maps.googleapis.com/maps/api/js？&callback=initialize”；
document.body.appendChild（脚本）；
});
函数初始化（）{
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
标记：findMarkers（）；
控制台日志（标记）；
控制台.日志（标记.长度）；
//信息窗口内容
var infoWindowContent=[
['' +
“”+“地址”+”“+”，
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；iconsole.log（markers.length）等于0！而前面的console.log（标记）显示对象
可能是var标记的语法错误？
无论如何
有人帮我处理这个案子吗
谢谢看起来问题出在firebase数据回调上。因为您已经为google map api设置了回调callback=initialize
，所以在firebase执行函数时，标记数据尚未从firebase中准备好
我更愿意这样做（请记住，firebase回调所需的时间比加载的GoogleMap脚本要长&map依赖于firebase的数据）
jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=“//maps.googleapis.com/maps/api/js？&callback=findMarkers”；
document.body.appendChild（脚本）；
});
函数初始化（标记）{
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
控制台日志（标记）；
控制台.日志（标记.长度）；
//信息窗口内容
var infoWindowContent=[
['' +
“”+“地址”+”“+”，
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i
看起来问题出在firebase数据回调上。因为您已经为google map api设置了回调callback=initialize
，所以在firebase执行函数时，标记数据尚未从firebase中准备好
我更愿意这样做（请记住，firebase回调所需的时间比加载的GoogleMap脚本要长&map依赖于firebase的数据）
jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=”/
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?&callback=findMarkers";
document.body.appendChild(script);
});
function initialize(markers) {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
console.log(markers);
console.log(markers.length);
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<p>' + 'adresse' +'</p>' + '</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
function findMarkers(){
markers = [];
var data = firebase.database();
var dataRef = firebase.database().ref("signalement/");
dataRef.on("child_added", function(data) {
var key = data.key;
const signalement = data.val();
const adresse = signalement.adresse;
const coordonnees = signalement.coordonnees;
var marker = [adresse, coordonnees];
markers.push( marker );
});
// send prepared marker array to map initialize function
intialize(markers);
}