使用Google地图的热图API

我正尝试使用Google地图API创建热图。我得到的是地图，而不是坐标上的热值。给出以下代码：使用Google地图的热图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>

这是输出的屏幕截图。任何人都可以帮助我吗？

enter image description here

来源

2013-01-10 Aravind Asok

按照Google Maps API documentation，你应该传递google.maps.LatLng对象数组到HeatmapLayer作为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) 
];

此外，您还需要通过添加&libraries=visualization到URL的末尾来加载google.maps.visualization库时您包括谷歌地图API。

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

来源

2013-01-10 07:40:11 Andrew

感谢您的帮助。现在它的工作:) –

@AravindAsok很高兴帮助！如果这回答你的问题出色，请考虑给我一个大的绿色复选标记！ ;） – Andrew

你是忘了放在这里结束支架 {位置：新google.maps.LatLng（8.8678，76.5623_ _}，

这就是问题所在

来源

2017-01-12 07:18:21

使用Google地图的热图API

回答

相关问题