首先，我的数据如下所示:
然后我有一个谷歌地图:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3,
styles: [{
featureType: 'poi',
stylers: [{ visibility: 'off' }] // Turn off points of interest.
}, {
featureType: 'transit.station',
stylers: [{ visibility: 'off' }] // Turn off bus stations, train stations, etc.
}],
disableDoubleClickZoom: true
});
}
var firebase = new Firebase("https://dogouttest-1517327924086.firebaseio.com");
我的 firebase 已使用他们提供的代码正确初始化。
这是我的 html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5fGURVIJKUbxf_zu7EGTWLwM8tLZI-us&libraries=visualization&callback=initMap">
</script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAWk8PNIytV4zzHeeqi_Zos2LcpN1u_9qY",
authDomain: "dogouttest-1517327924086.firebaseapp.com",
databaseURL: "https://dogouttest-1517327924086.firebaseio.com",
projectId: "dogouttest-1517327924086",
storageBucket: "dogouttest-1517327924086.appspot.com",
messagingSenderId: "830022432628"
};
firebase.initializeApp(config);
</script>
<script src="main.js"></script>
</body>
</html>
我不知道如何导入 firebase 数据以将其作为谷歌地图中的标记。
有什么帮助吗？
谢谢:)
最佳答案
首先，从 firebase 数据库中以数组格式检索点。将使用该数组创建标记。为此，您需要一个理由来触发此函数，您将加载数据。假设您将通过按钮或 document.onload 事件触发此事件。无论如何，以下功能将满足您的要求:
function loadPointsFromFirebase (map) { // pass the initialised map to the function
var marker= {};
var db = firebase.database();
db.ref('clicks').ones('value', points => {
points.forEach(point=>{
marker = new google.maps.Marker({
map:map,
position: {
lat: point.val().lat,
lng: point.val().lng
}
})
marker.setMap(map) // Set market on the map
})
})
}
关于javascript - 将地理数据从 Firebase 导入到谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48565497/