1

几个小时以来，我一直在尝试实现一个非常简单的 Google HeatMap 演示。我几乎从演示页面复制了所有内容（在 google map api 文档上）这是 2 条错误消息：

  1. 未捕获的 ReferenceError：H 未定义 HeatMap.html:6
  2. 未捕获的 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

我不确定这会有多大帮助，但这里有一个工作版本，它依赖于一组非常不同的库依赖项。源代码中的那些让我觉得很奇怪。他们似乎依靠非常奇怪的技术来初始化地图。

如果你不介意我问，你从哪里得到你所依赖的代码？我使用的修改后的依赖来自这里，我不相信我见过任何与你之前从谷歌发布的内容非常相似的东西......它似乎依赖于修改后的 eval 形式来创建地图库，这将是非常不寻常的。总体而言，该示例在功能上与您的示例非常相似，只是库构建似乎有所不同。

于 2013-02-12T04:26:18.803 回答