在谷歌地图中添加带有标签的标记，折线的每一端答案

【问题标题】：Add marker with label in google map's every end of polyline在谷歌地图中添加带有标签的标记，折线的每一端
【发布时间】：2018-07-05 12:10:34
【问题描述】：

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

    var bikearray = [];
    $('#searchbtn').on('click', function() {
     $.ajax({
        url:'http://metrobikes.in/api/a2b-bike-movement-on-map',
        method:"GET",
        data : {
            start_Date : "2017-12-11",
            end_date : "2018-01-24",
            bike_number : "KA-51-D-6109"
       },
    }).done(function(data){
        bikearray = data.result.data;
        initMap();
     });
});



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 to_lat = parseFloat(bikearray[i].to_lat);
        var to_long =parseFloat(bikearray[i].to_long);
        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);


    }


}

【问题讨论】：

没有向折线添加标记的代码。你试过什么没用？

标签： javascript google-maps google-maps-api-3 google-polyline

【解决方案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

代码 sn-p：

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

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

<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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：

【解决方案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
});

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

【讨论】：