javascript - 谷歌地图热图未显示

我正在尝试创建一个简单的热图示例，但没有显示任何内容。我没有任何错误，也不知道问题是什么。如果有人可以让我知道他们看到了什么，我将不胜感激。

<!DOCTYPE html>
<html>
<head>
<title>HeatMap</title>
 <script
        src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false&libraries=visualization"
        type="text/javascript"></script>
<script>
var map;
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(36.778261, -119.417932),
new google.maps.LatLng(-37.814107, 144.96328),
new google.maps.LatLng(33.867487, 151.20699),
{ location: new google.maps.LatLng(40.416775, -3.70379), weight: 6 },
{ location: new google.maps.LatLng(41.385064, 2.173403), weight: 2 },
{ location: new google.maps.LatLng(52.130661, -3.783712), weight: 2 },
{ location: new google.maps.LatLng(55.378051, -3.435973), weight: 8 },
{ location: new google.maps.LatLng(-40.900557, 174.885971), weight: 6 },
{ location: new google.maps.LatLng(40.714353, -74.005973), weight: 6 }
];
function initializeMap() {
var myMapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.785611, -25.94700),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(‘map’),myMapOptions);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
dissipating: false,
map: map
});
}
google.maps.event.addDomListener(window, ‘load’, initializeMap);
</script>
</head>
<body>
<div id="map" style="width: 1000px; height: 800px;"></div>
</body>
</html>

最佳答案

您的代码中包含非法字符。 Chrome 控制台在第 28 行报告:Uncaught SyntaxError: Unexpected token ILLEGAL。如果我用单引号替换它们，它对我有用。

两个变化:

google.maps.event.addDomListener(窗口，'加载'，initializeMap); ->“加载”
map = new google.maps.Map(document.getElementById('map'),myMapOptions); ->“ map ”

<!DOCTYPE html>
<html>
<head>
<title>HeatMap</title>
 <script
        src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"
        type="text/javascript"></script>
<script>
var map;
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(36.778261, -119.417932),
new google.maps.LatLng(-37.814107, 144.96328),
new google.maps.LatLng(33.867487, 151.20699),
{ location: new google.maps.LatLng(40.416775, -3.70379), weight: 6 },
{ location: new google.maps.LatLng(41.385064, 2.173403), weight: 2 },
{ location: new google.maps.LatLng(52.130661, -3.783712), weight: 2 },
{ location: new google.maps.LatLng(55.378051, -3.435973), weight: 8 },
{ location: new google.maps.LatLng(-40.900557, 174.885971), weight: 6 },
{ location: new google.maps.LatLng(40.714353, -74.005973), weight: 6 }
];
function initializeMap() {
var myMapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.785611, -25.94700),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),myMapOptions);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
dissipating: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 500px;"></div>
</body>
</html>

working example

代码片段:

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>HeatMap</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization" type="text/javascript"></script>
  <script>
    var map;
    var heatmapData = [
      new google.maps.LatLng(37.782, -122.447),
      new google.maps.LatLng(36.778261, -119.417932),
      new google.maps.LatLng(-37.814107, 144.96328),
      new google.maps.LatLng(33.867487, 151.20699),
      {
        location: new google.maps.LatLng(40.416775, -3.70379),
        weight: 6
      },
      {
        location: new google.maps.LatLng(41.385064, 2.173403),
        weight: 2
      },
      {
        location: new google.maps.LatLng(52.130661, -3.783712),
        weight: 2
      },
      {
        location: new google.maps.LatLng(55.378051, -3.435973),
        weight: 8
      },
      {
        location: new google.maps.LatLng(-40.900557, 174.885971),
        weight: 6
      },
      {
        location: new google.maps.LatLng(40.714353, -74.005973),
        weight: 6
      }
    ];

    function initializeMap() {
      var myMapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.785611, -25.94700),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'), myMapOptions);
      var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        dissipating: false,
        map: map
      });
    }
    google.maps.event.addDomListener(window, 'load', initializeMap);
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

关于javascript - 谷歌地图热图未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20861906/

javascript - 谷歌地图热图未显示

上一篇：javascript - 如何在 Angular 中将焦点保持在同一文本字段中

下一篇：javascript - 加载模板时在模板内触发 JavaScript？