2

Google Maps API を使用してヒート マップを作成しようとしています。マップを取得していますが、座標の熱値は取得していません。以下の ID にコードを示します。

<!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 を含める場合は、URL の末尾にgoogle.maps.visualization追加してライブラリを読み込む必要があります。&libraries=visualization

作業例: 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 に答える