在谷歌地图的折线的每一端添加带标签的标记

Question

我有多条折线，我想在每一端都有一个标记，并且带有标签的折线开始，我正在跟踪自行车运动，我正在获取折线，但我需要在折线或在线上显示时间终点，如果我可以在折线中显示时间，那就太好了。我正在开发一个跟踪系统，我得到lat长，起点和终点我也是绘制折线，我想在折线上显示时间或至少在每一端显示一个标记并显示时间.. 。下面是我的代码

alist = [5,6,7,8]
args = [range(x) for x in alist] # create the arg list
p = itertools.product(*args) # expand args
...

Answer 1

要将标记添加到折线的开头和结尾，请在开始点和结束点添加标记。要在结束标记上添加InfoWindow中的时间，也要添加它（并触发单击它以打开它）：

for(i = 0; i < bikearray.length;  i++){
    var from_lat = parseFloat(bikearray[i].from_lat);
    var from_long = parseFloat(bikearray[i].from_long);
    var startMarker = new google.maps.Marker({
      map: map,
      position: {lat: from_lat, lng: from_long}
    });
    var to_lat = parseFloat(bikearray[i].to_lat);
    var to_long =parseFloat(bikearray[i].to_long);
    var endMarker = new google.maps.Marker({
      map: map,
      position: {lat: to_lat, lng: to_long}
    });
    var time = bikearray[i].time;
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) { 
      return function(evt) {
        infowindow.setContent(time);
        infowindow.open(map, marker);
    }})(endMarker, time, infowindow));
    google.maps.event.trigger(endMarker, 'click');
    var linecolor = bikearray[i].colour;

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var bikearray = [{
    from_lat: 12.98966,
    from_long: 77.653637,
    to_lat: 12.9715987,
    to_long: 77.5945626,
    colour: "blue",
    time: "12:00"
  },
  {
    from_lat: 13.0826802,
    from_long: 80.2707184,
    to_lat: 12.9922145,
    to_long: 77.7159,
    colour: "red",
    time: "11:00"
  },
]

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(12.98966, 77.653637),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  for (i = 0; i < bikearray.length; i++) {
    var from_lat = parseFloat(bikearray[i].from_lat);
    var from_long = parseFloat(bikearray[i].from_long);
    var startMarker = new google.maps.Marker({
      map: map,
      position: {
        lat: from_lat,
        lng: from_long
      }
    });
    var to_lat = parseFloat(bikearray[i].to_lat);
    var to_long = parseFloat(bikearray[i].to_long);
    var endMarker = new google.maps.Marker({
      map: map,
      position: {
        lat: to_lat,
        lng: to_long
      }
    });
    var time = bikearray[i].time;
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
      return function(evt) {
        infowindow.setContent(time);
        infowindow.open(map, marker);
      }
    })(endMarker, time, infowindow));
    google.maps.event.trigger(endMarker, 'click');
    var linecolor = bikearray[i].colour;
    console.log(bikearray[i].from_lat);
    var bikePath = new google.maps.Polyline({
      path: [

        {
          lat: from_lat,
          lng: from_long
        },
        {
          lat: to_lat,
          lng: to_long
        }
      ],
      icons: [{
        icon: lineSymbol,
        repeat: '35px',
        offset: '100%'
      }],
      geodesic: true,
      strokeColor: linecolor,
      strokeOpacity: 1.0,
      strokeWeight: 2,
      map: map
    });
    bikePath.setMap(map);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在Text Within Polyline Google Maps V3

中已经回答了这个问题

一种解决方案是使用github中的这个库： https://github.com/googlemaps/js-map-label

您可以像这样使用它：

var labelPosition = new google.maps.LatLng(middle_lat, middle_long);    

var mapLabel = new MapLabel({
    text: "Your text",
    position: labelPosition ,
    map: map,
    fontSize: 12
});

您必须计算两点之间的中间点。