谷歌HeatMap API抛出2错误消息：H/M没有定义

我一直试图实施谷歌HeatMap一个非常简单的演示数小时。我几乎复制从演示页面一切（谷歌的地图API文档上）这里是2错误消息：谷歌HeatMap API抛出2错误消息：H/M没有定义

未捕获的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>

来源

2013-02-12 Franva

我不确定这会有多少帮助，但here's a working version依赖于一组非常不同的库依赖项。源代码中的代码让我觉得很奇怪;他们似乎依靠非常奇怪的技术来初始化地图。

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

来源

2013-02-12 04:26:18 Bubbles

我相信代码是从https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap的源代码借来的 – thtsigma 2013-02-12 04:30:48

这就是我用来修复他的例子，但代码Franva有点不同 - 看他们例子的底部，有几个额外的脚本与这个例子不同。 – Bubbles 2013-02-12 04:32:39

Hi Bubbles，代码直接从谷歌复制。以下是链接：https：//google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap – Franva 2013-02-12 04:34:33

谷歌HeatMap API抛出2错误消息：H/M没有定义

回答

相关问题