具有Firebase不工作的协同实时映射
具有Firebase不工作的协同实时映射
提问于 2016-03-28 21:12:08
我对JS和Google相当陌生。我试图通过谷歌提供的这里实时地图的基本教程。我正在使用崇高文本并在我的服务器上保存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
});
});
}我只得到了基本的地图。我能驾驭它，但仅此而已。
我遗漏了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-03-30 02:22:29
我从您的代码中得到一个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
});
});概念小提琴的证明
Stack Overflow用户
发布于 2016-03-30 02:22:15
我想你打给firebase.push的电话放错位置了。我把它放在创建marker之后。
我还会设置一些console.log，以准确地了解正在发生的事情。Chrome工具、网络选项卡也可以帮助您理解是否您实际上正在访问firebase服务器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36271276
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号