如何在gmap上画一条线和一个框？

Question

我见过this tool，可让您在gmaps上画一条线，并为您生成js代码

所以JS是：

var myCoordinates = [
  new google.maps.LatLng(48.955410,10.034749),
  new google.maps.LatLng(59.648652,29.898030)
];
var polyOptions = {
  path: myCoordinates,
  strokeColor: "#FF0000",
  strokeOpacity: 1,
  strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);

我想做的就是从我收到的图钉开始行，而不是我按照该工具单击时设置的图钉开始行，然后在该行的末尾绘制一个信息框（所以不在该位置它从别针开始）。

我的目标是从起点开始画一条线，并有一个信息框，如下图所示，请参见地图上的线

因此，我可以在这里传递坐标：

  new google.maps.LatLng(48.955410,10.034749),
  new google.maps.LatLng(59.648652,29.898030)

但是我将如何定位行尾并将文本放置在那？

使用this answer，我可以定义起点和终点，但是如何在终点处绘制框？

Answer 1

我认为您可以在行的末端使用标记，然后在末端附加例如infoWindow，最后隐藏该标记。

function initMap() {

  var coordinates = {
    lat: 40.785845,
    lng: -74.020496
  };

  var coordinates2 = {
    lat: 40.805845,
    lng: -74.130496
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: coordinates,
    scrollwheel: false
  });

  var marker = new google.maps.Marker({
    position: coordinates,
    map: map
  });

    var infoMarker = new google.maps.Marker({
    position: coordinates2,
    map: map
  });

  var infowWindow = new google.maps.InfoWindow();

    var line = new google.maps.Polyline({
    path: [
      marker.position,
      infoMarker.position
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1,
    strokeWeight: 3
  });

  line.setMap(map);

  infowWindow.setContent("<b>Hello world!</b>");
  infowWindow.open(map, infoMarker);
  infoMarker.setVisible(false);
}

google.maps.event.addDomListener(window, "load", initMap);

检查它是否可以在此jsfiddle

上运行