使用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

回答

相關問題