Question

我在this处尝试了教程。当我到达热图部分时，它不再绘制地图了。我想我一定做错了但我不知道...... 我从图标中移除评论的那一刻：图像部分我会得到一张地图，但热图部分无效。

我希望有人可以帮助我亲切的问候盖

// Reference to the Firebase database.
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/");


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3
  });

  // Add marker on user click
  map.addListener('click', function(e) {
    firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()});
  });
  // Create a heatmap.
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: [],
    map: map,
    radius: 8
  });
  firebase.on("child_added", function(snapshot, prevChildKey) {
    // Get latitude and longitude from Firebase.
    var newPosition = snapshot.val();

    // Create a google.maps.LatLng object for the position of the marker.
    // A LatLng object literal (as above) could be used, but the heatmap
    // in the next step requires a google.maps.LatLng object.
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);

    // Place a marker at that location.
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    //  icon: image
    });
       heatmap.getData().push(latLng);
  });
}

        <!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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o&region=BE&callback=initMap"
        async defer></script>
        <script src="map.js"> </script>
      </body>
    </html>

Answer 1

我的代码出现了javascript错误：Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined

您不包括visualization library。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o&region=BE&callback=initMap"
    async defer></script>

应该是（注意添加的＆＃34; libraries = visual＆＃34;）：

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o&region=BE&callback=initMap"
    async defer></script>

proof of concept fiddle

使用Firebase热图的协作实时映射无效

1 个答案: