Fatal编程技术网
  • javascript/
  • Javascript 使用谷歌地图API的热图

Javascript 使用谷歌地图API的热图

javascript google-maps-api-3

Javascript 使用谷歌地图API的热图,javascript,google-maps-api-3,heatmap,Javascript,Google Maps Api 3,Heatmap,我正在尝试使用谷歌地图API创建热图。我得到的是地图，但不是坐标上的热值。代码如下所示： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html

我正在尝试使用谷歌地图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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
变量映射选项={
缩放：3，
中心：新google.maps.LatLng（8.881928176.592758），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
}
函数loadScript（）{
var script=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.src=”http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&callback=initialize";
document.body.appendChild（脚本）；
}
window.onload=loadScript；
var热图数据=[
{地点：新google.maps.LatLng（8.8678,76.5623}，
{位置：new google.maps.LatLng（9.5674,77.5623）}，
{位置：新google.maps.LatLng（10.7821,78.447）}，
{位置：新的google.maps.LatLng（12.452379.443）}，
{位置：新google.maps.LatLng（37.782，-122.441）}，
{位置：新google.maps.LatLng（37.782，-122.439）}，
{位置：新google.maps.LatLng（37.782，-122.435）}，
{位置：新google.maps.LatLng（37.785，-122.447）}，
{位置：新google.maps.LatLng（37.785，-122.445）}，
{位置：新google.maps.LatLng（37.785，-122.441）}，
{位置：新google.maps.LatLng（37.785，-122.437）}，
{位置：新google.maps.LatLng（37.785，-122.435）}
];
var heatmap=new google.maps.visualization.HeatmapLayer({
数据：热图数据
});
setOptions（{radius:heatmap.get（'20'）}）；
热图.设置图（map）；
这是输出的截图。有人能帮我吗

根据，您应该将
google.maps.LatLng
对象数组作为
数据
传递给
HeatmapLayer

试试这个：

var heatMapData=[
新的google.maps.LatLng（8.8678,76.5623），
新的google.maps.LatLng（9.5674,77.5623），
新的google.maps.LatLng（10.782178.447），
新的google.maps.LatLng（12.452379.443），
新google.maps.LatLng（37.782，-122.441），
新google.maps.LatLng（37.782，-122.439），
新google.maps.LatLng（37.782，-122.435），
新google.maps.LatLng（37.785，-122.447），
新google.maps.LatLng（37.785，-122.445），
新google.maps.LatLng（37.785，-122.441），
新google.maps.LatLng（37.785，-122.437），
新google.maps.LatLng（37.785，-122.435）
];
此外，在包含google maps API时，还需要通过在URL末尾添加
&libraries=visualization
来加载
google.maps.visualization
库

工作示例：

您忘了将结束括号放在这里 {地点：新google.maps.LatLng（8.8678,76.5623)

这是个问题，请帮我一个大的绿签！