1

私は何時間もの間、Google ヒートマップの非常に単純なデモを実装しようとしてきました。デモ ページ (Google マップ API ドキュメント) からほとんどすべてをコピーしました。2 つのエラー メッセージは次のとおりです。

  1. Uncaught ReferenceError: H is not defined HeatMap.html:6
  2. Uncaught ReferenceError: M が定義されていません

ここに画像の説明を入力

そしてここにコードがあります

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&sensor=true"></script>
<script type="text/javascript">

    // Adding 500 Data Points
    var map, pointarray, heatmap;

    var taxiData = [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
      new google.maps.LatLng(37.782919, -122.442815),
      new google.maps.LatLng(37.782992, -122.442112),
      new google.maps.LatLng(37.783100, -122.441461),
      //...........so many data here, skip...........
      new google.maps.LatLng(37.756335, -122.403719),
      new google.maps.LatLng(37.755503, -122.403406),
      new google.maps.LatLng(37.754665, -122.403242),
      new google.maps.LatLng(37.753837, -122.403172),
      new google.maps.LatLng(37.752986, -122.403112),
      new google.maps.LatLng(37.751266, -122.403355)
    ];

    function initialize() {
        var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.774546, -122.433523),
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        pointArray = new google.maps.MVCArray(taxiData);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });

        heatmap.setMap(map);
    }

    function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
    }

    function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.setOptions({
            gradient: heatmap.get('gradient') ? null : gradient
        });
    }

    function changeRadius() {
        heatmap.setOptions({ radius: heatmap.get('radius') ? null : 20 });
    }

    function changeOpacity() {
        heatmap.setOptions({ opacity: heatmap.get('opacity') ? null : 0.2 });
    }

    $(document).load(function () {

    });

    $(document.body).on("onload", initialize);

</script>

<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bcommon,map,util,onion,visualization_impl%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bstats,controls%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bmarker%7D.js">

</script>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>
</html>
4

1 に答える 1

2

これがどれほど役立つかはわかりませんが、これは非常に異なるライブラリ依存関係のセットに依存する作業バージョンです。ソースコードにあるものは非常に奇妙に思えます。マップを初期化するために非常に奇妙な手法に依存しているようです。

よろしければ、頼りにしているコードはどこで手に入れましたか? 私が使用した変更された依存関係はhere から来ました。以前にGoogleから投稿したものとまったく同じものを見たことはないと思います...マップライブラリを作成するために変更された形式のevalに依存しているようです.これは非常に珍しいことです。全体として、この例は機能的にあなたのものと非常に似ていますが、ライブラリの構築だけが異なっているようです。

于 2013-02-12T04:26:18.803 に答える