仅来自两点的热图（纬度和经度）谷歌地图 api答案

【问题标题】：HeatMap from only two points(lat&lng) google maps api仅来自两点的热图（纬度和经度）谷歌地图 api
【发布时间】：2018-04-06 21:18:12
【问题描述】：

当每个点都有 lat 和 lng 时，我可以使用 google maps API 在 2 个点之间创建一条直线的热图吗？

在我看来，热图是基于散点的图表。

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

使用google.maps.geometry.spherical.interpolate 方法沿两点之间的直线均匀间隔点：

var heatmapData = [];
for (var i = 0; i <= 100; i++) {
  var point = google.maps.geometry.spherical.interpolate(polyline.getPath().getAt(0), polyline.getPath().getAt(1), i / 100);
  heatmapData.push(point);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  map: map
});

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polyline = new google.maps.Polyline({
    // map: map,
    path: [{lat: 37.4688273,lng: -122.141},{lat: 37.4335499,lng: -122.203}]
  });
  var heatmapData = [];
  for (var i = 0; i <= 100; i++) {
    var point = google.maps.geometry.spherical.interpolate(polyline.getPath().getAt(0), polyline.getPath().getAt(1), i / 100);
    heatmapData.push(point);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    map: map
  })
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization"></script>
<div id="map_canvas"></div>

【讨论】：