Question

构建一个服务器端应用程序，它将使用google maps api加权热图来显示一些数据。

https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

然而，我的JS没有显示数据点（完美地显示地图）。有什么想法吗？

  function initialize() {

    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(37.774546, -122.433523),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var heatmapData = [
      {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
      new google.maps.LatLng(37.782, -122.445),
      {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
      {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
      {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
      new google.maps.LatLng(37.782, -122.437),
      {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

      {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
      {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
      new google.maps.LatLng(37.785, -122.443),
      {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
      new google.maps.LatLng(37.785, -122.439),
      {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
      {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
    ];

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

    heatmap.setMap(map);

  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&callback=initialize';
    document.body.appendChild(script);
  }

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

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

  window.onload = loadScript;
  google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

编辑1 - Chrome记录此信息：

Uncaught ReferenceError: google is not defined heatmap:68
Uncaught ReferenceError: heatMapData is not defined heatmap:45
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. VM1930:45
GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=host:localhost…98x0.65918,size:1920x689,relsize:1.00,token:4b2u2h59g8,src:apiv3,ts:viv6jz net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DDCyUJvj7n5l,ZvwOO2ZR5…_mlil,HRlFM3ZVJGn,Jx3V5n-JzIn,F-E4oUlMhVs%26z%3D12&cad=src:apiv3,ts:viv6n3 net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DMQc6u1JFizM,0Dl57QyKHf%26z%3D12&cad=src:apiv3,ts:viv6rc net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DOk5Wmy33jdt,Dw5TFMIYSGt%26z%3D12&cad=src:apiv3,ts:viv6tf net::ERR_BLOCKED_BY_CLIENT VM1937:1

编辑2 - Js包裹在这块玉石中：

doctype 5
html
  head
    title #{title} - picycle
    style
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;

        border: 0.2px solid #999;
      }

    script(type='text/javascript')

<JS CODE FROM ABOVE>

  body

    #panel
      button(onclick='toggleHeatmap()') Toggle Heatmap
      button(onclick='changeOpacity()') Change opacity

    #map-canvas

Answer 1

Javascript区分大小写：heatmapData与heatMapData

不同

您定义：

 var heatmapData = [

但请使用：

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

Uncaught ReferenceError: google is not defined heatmap:68来自在加载API之前初始化的调用（您当前称之为3次，您只需要回调中的那个）

这两个是无关的：

  google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

Answer 2

问题是您在代码末尾调用initialize，此时尚未加载google.maps。

之后谷歌地图在完成加载后再次调用initialize。

您执行此行google.maps.event.addDomListener(window, 'load', initialize);也没用，因为您在loadScript方法中加载google.maps时添加了回调：script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization& callback = initialize'

所以，删除这一行：

google.maps.event.addDomListener(window, 'load', initialize); initialize();

之后，您必须在JavaScript中使用变量时保留这种情况：heatMapData与heatmapData
不同
这可以解决错误。如果仍然无效，请尝试回来

Google地图热图数据点未显示

2 个答案: