Google 地图热图仅在热图数据被硬编码时有效，而在使用 for 循环生成时无效

Question

我正在尝试使用 API 在 Google 地图上绘制热图。在使用 LatLng 对象的硬编码数组时，渲染有效。但是，如果我随后尝试删除硬编码数组并使用 for 循环生成数组，渲染将失败。

console.log 2 个数组变量给我相同的对象。

这里提供js-fiddle：https://jsfiddle.net/arpanio/7weomu5g/61/

2 个变量是：

硬编码数组：heatmapData
生成的数组：heatmap_data

请参阅第 87 行和第 88 行，我在其中注释掉并在 2 个变量之间切换。硬编码选项有效。生成的数组选项不起作用。我将两者都打印到控制台，但我没有看到对象有任何差异（除了纬度和经度的实际值）。

js代码转载如下：

var map;
var service;
var infowindow;

function initMap() {
  var sydney = new google.maps.LatLng(45.76404, 4.83565);

  infowindow = new google.maps.InfoWindow();

  map = new google.maps.Map(
      document.getElementById('map'), {center: sydney, zoom: 12});
var heatmapData = [
new google.maps.LatLng(45.7523537999999,4.8405),
new google.maps.LatLng(45.7663606,4.8328),
new google.maps.LatLng(45.7603967,4.8557)
];

console.log(heatmapData);

//Data to be obtained from mymap -> KML -> GeoJSON
geo_json = {  
   "type":"FeatureCollection",
   "name":"merged",
   "crs":{  
      "type":"name",
      "properties":{  
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[  
      {  
         "type":"Feature",
         "properties":{  
            "Name":"Auchan Drive Lyon Saint Priest"
         },
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               4.9252405,
               45.7235401
            ]
         }
      },
      {  
         "type":"Feature",
         "properties":{  
            "Name":"Auchan Drive Saint Genis (Chapônost)"
         },
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               4.76585360000001,
               45.6992269
            ]
         }
      },
      {  
         "type":"Feature",
         "properties":{  
            "Name":"Auchan"
         },
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               4.8008698,
               45.7498202
            ]
         }
      }
   ]
};

//Convert GeoJSON to Google-specific heatmap data
var heatmap_data = [];
for(var i = 0; i < geo_json.features.length; i++) {
    var temp = geo_json.features[i].geometry.coordinates;
  heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));
  //console.log(temp);
  /* var lat_lng = new google.maps.LatLng(temp[0], temp[1]);
  heatmap_data.push(lat_lng); */
}
console.log(heatmap_data);


var heatmap = new google.maps.visualization.HeatmapLayer({
 /* Problem here */
 data: heatmapData, //This works
 //data: heatmap_data, //This does not
 radius: 50,
  opacity: 0.4
});
heatmap.setMap(map);

  var request = {
    location: sydney,
    radius: '500',
    query: 'Carrefour'
  };

  service = new google.maps.places.PlacesService(map);

  service.textSearch(request, function(results, status) {
    console.log(results);
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
       //console.log(JSON.stringify(results[i].geometry.location));       
      }

      map.setCenter(results[0].geometry.location);
    }


  });
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 2
    },
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

Answer 1

更改 temp 变量的坐标序列 -

heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));

到

heatmap_data.push(new google.maps.LatLng(temp[1], temp[0]));

工作 JSFiddle - https://jsfiddle.net/hL7n2fek/

您的 heatmap 正在生成，但是使用硬编码 heatmapData 坐标是 45.7523537999999,4.8405 指向 France 中的某处，您的 google 地图在附近初始化为相同的坐标。

但是在 geometry 属性 in geo_json 对象中，坐标指定为 [4.9252405, 45.7235401] 指向位置 Somalia 的某处。您的 google 地图可见部分不包括此内容。如果再放大一点，可以看到它正在生成。

Answer 2

GeoJson按照[Longitude, Latitude].

的顺序指定坐标

所以，这段代码：

heatmap_data.push(new google.maps.LatLng(temp[0], temp[1])); // temp[0] (is Longitude), temp[1] (is Latitude)

应该是：

heatmap_data.push(new google.maps.LatLng(temp[1], temp[0])); // temp[1] (is Latitude), temp[1] (is Longitude)

updated fiddle

代码片段：

var map;
var service;
var infowindow;

function initMap() {
  var sydney = new google.maps.LatLng(45.76404, 4.83565);

  infowindow = new google.maps.InfoWindow();

  map = new google.maps.Map(
    document.getElementById('map'), {
      center: sydney,
      zoom: 12
    });
  var heatmapData = [
    new google.maps.LatLng(45.7523537999999, 4.8405),
    new google.maps.LatLng(45.7663606, 4.8328),
    new google.maps.LatLng(45.7603967, 4.8557)
  ];

  console.log(heatmapData);

  //Data to be obtained from mymap -> KML -> GeoJSON
  geo_json = {
    "type": "FeatureCollection",
    "name": "merged",
    "crs": {
      "type": "name",
      "properties": {
        "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
      }
    },
    "features": [{
        "type": "Feature",
        "properties": {
          "Name": "Auchan Drive Lyon Saint Priest"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            4.8405,
            45.7523537999999
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "Name": "Auchan Drive Saint Genis (Chapônost)"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            4.8328,
            45.7663606
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "Name": "Auchan"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            4.8557,
            45.7603967
          ]
        }
      }
    ]
  };

  //Convert GeoJSON to Google-specific heatmap data
  var heatmap_data = [];
  for (var i = 0; i < geo_json.features.length; i++) {
    var temp = geo_json.features[i].geometry.coordinates;
    // heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));
    console.log(temp);
    var lat_lng = new google.maps.LatLng(temp[1], temp[0]);
    heatmap_data.push(lat_lng);
  }
  console.log(heatmap_data);


  var heatmap = new google.maps.visualization.HeatmapLayer({
    /* Problem here */
    // data: heatmapData, //This works
    data: heatmap_data, //This does not
    radius: 50,
    opacity: 0.4
  });
  heatmap.setMap(map);

  var request = {
    location: sydney,
    radius: '500',
    query: 'Carrefour'
  };

  service = new google.maps.places.PlacesService(map);

  service.textSearch(request, function(results, status) {
    console.log(results);
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
        //console.log(JSON.stringify(results[i].geometry.location));       
      }

      map.setCenter(results[0].geometry.location);
    }


  });
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 2
    },
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places,visualization&callback=initMap" async defer></script>

Google 地图热图仅在热图数据被硬编码时有效，而在使用 for 循环生成时无效

Google Maps Heatmap works only when the heatmap data is hardcoded and not when it is generated using a for loop

javascript

google-maps-api-3