HeatMap只有两点（lat＆amp; lng）谷歌地图api

Question

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

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

Answer 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

代码段

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;