Question

我是JS和Google Maps API的新手。我正在尝试通过Google提供的基本教程here来实时映射。我正在使用Sublime Text并在我的服务器上保存html和.js文件。我已经设置了Firebase帐户并引用了它。我无法将javascript正确地输入我的Firebase数据库的纬度和经度。

这是我的html＆amp;的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
    });
});
}

我得到的只是基本地图。我可以导航它，但就是这样。

我错过了什么？

Answer 1

我认为您对firebase.push的呼吁是错误的。在创建marker之后我会把它放进去。

我还会放一些console.log来了解究竟发生了什么。如果您实际访问firebase服务器，Chrome开发工具，网络选项卡也可以帮助您理解。

Answer 2

我的代码出现了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
  });
});

proof of concept fiddle

使用Firebase的协作实时映射无法正常工作

2 个答案: