2

我正在尝试使用 Google Maps API 创建热图。我得到的是地图，但不是坐标上的热值。给出下面的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
      
    </script>
    <script type="text/javascript">

   function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(8.881928, 76.592758),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;
 </script>

<script>
var heatMapData = [
  {location: new google.maps.LatLng(8.8678, 76.5623 },
  {location: new google.maps.LatLng(9.5674, 77.5623)},
  {location: new google.maps.LatLng(10.7821, 78.447)},
  {location: new google.maps.LatLng(12.4523, 79.443)},
  {location: new google.maps.LatLng(37.782, -122.441)},
  {location: new google.maps.LatLng(37.782, -122.439)},
  {location: new google.maps.LatLng(37.782, -122.435)},
  {location: new google.maps.LatLng(37.785, -122.447)},
  {location: new google.maps.LatLng(37.785, -122.445)},
  {location: new google.maps.LatLng(37.785, -122.441)},
  {location: new google.maps.LatLng(37.785, -122.437)},
  {location: new google.maps.LatLng(37.785, -122.435)}
];
  
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setOptions({radius: heatmap.get('20')});
heatmap.setMap(map);

</script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

这是输出的屏幕截图。有人可以帮我吗？

在此处输入图像描述

4

2 回答 2

3

根据Google Maps API 文档google.maps.LatLng，您应该将对象数组传递给HeatmapLayeras data。

试试这个：

var heatMapData = [
    new google.maps.LatLng(8.8678, 76.5623),
    new google.maps.LatLng(9.5674, 77.5623),
    new google.maps.LatLng(10.7821, 78.447),
    new google.maps.LatLng(12.4523, 79.443),
    new google.maps.LatLng(37.782, -122.441),
    new google.maps.LatLng(37.782, -122.439),
    new google.maps.LatLng(37.782, -122.435),
    new google.maps.LatLng(37.785, -122.447),
    new google.maps.LatLng(37.785, -122.445),
    new google.maps.LatLng(37.785, -122.441),
    new google.maps.LatLng(37.785, -122.437),
    new google.maps.LatLng(37.785, -122.435)
];

此外，当您包含 Google Maps API 时，您需要google.maps.visualization通过添加&libraries=visualization到 URL 的末尾来加载库。

工作示例：http: //jsfiddle.net/EBQQH/

于 2013-01-10T07:40:11.303 回答
0

您忘记将结束括号放在这里 {location: new google.maps.LatLng(8.8678, 76.5623_ _ _},

那就是问题所在

于 2017-01-12T07:18:21.213 回答