我对 JS 和 Google Maps API 相当陌生。我正在尝试浏览 Google 提供的 here 基本教程来实时绘制 map 。我正在使用 Sublime Text 并将 html 和 .js 文件保存在我的服务器上。我已经设置了一个 Firebase 帐户并引用了它。我无法让 JavaScript 正确地将纬度和经度输入到我的 Firebase 数据库中。
这是我的 html 和 css:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByiF_oXuIND_HKTnWb2EYjuHazdhi8F_k
&libraries=visualization&callback=initMap">
</script>
<script src="map.js"> </script>
</body>
</html>
这是我的 JavaScript:
var firebase = new Firebase(
"https://spatialform.firebaseio.com/# KDyLsffRQiYNSsPGBVW|77ec456e3f094217dc4cbe36f45256f4"
);
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 39.6017,
lng: -110.7970
},
zoom: 14,
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: false
});
map.addListener('click', function(e) {
var marker = new google.maps.Marker({
position: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
},
firebase.push({
lat: e.latLng.lat(),
lng: e.latLng.lng()
});
map: map
});
});
firebase.on("child_added", function(snapshot, prevChildKey) {
var newPosition = snapshot.val();
var latLng = new google.maps.LatLng(newPosition.lat,
newPosition.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
});
}
我得到的只是基本 map 。我可以导航它，但仅此而已。
我错过了什么？
最佳答案
我在您的代码中遇到了 JavaScript 错误:Uncaught SyntaxError: Unexpected token 。
这无效:
var marker = new google.maps.Marker({
position: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
},
firebase.push({ // <---- error
lat: e.latLng.lat(),
lng: e.latLng.lng()
});
map: map
});
将对 firebase 的访问与标记构造函数分开:
map.addListener('click', function(e) {
firebase.push({
lat: e.latLng.lat(),
lng: e.latLng.lng()
});
var marker = new google.maps.Marker({
position: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
},
map: map
});
});
关于javascript - 与 Firebase 的协作实时 map 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36271276/