Question

我一直在努力实现一个非常简单的Google HeatMap演示。我几乎从演示页面复制了所有内容（在google map api文档中）以下是2条错误消息：

未捕获的ReferenceError：H未定义HeatMap.html：6
未捕获的ReferenceError：M未定义

enter image description here

这是代码

<!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>

Answer 1

我不确定这会有多大帮助，但here's a working version依赖于一组完全不同的库依赖关系。源代码中的那些打击我很奇怪;他们似乎依靠非常奇怪的技术来初始化地图。

如果你不介意我问，你在哪里得到你依赖的代码？我使用的修改后的依赖项来自from here，我不相信我之前看到的任何内容与之前从谷歌发布的内容非常相似......似乎它依赖于修改后的eval形式来创建地图库，这将是非常不寻常的。总的来说，这个例子与你的功能非常相似，只是图书馆建设似乎有所不同。

Google HeatMap API会抛出2条错误消息：未定义H / M.

1 个答案: