如何在谷歌地图上的两点之间画一条线？

Question

我需要在谷歌地图上的两点之间画一条曲线。

如何使用 jQuery 进行绘图？

此代码适用于一点。如何更改 2 点并在 Google 地图中的两点之间绘制一条曲线？

我的代码是：

if ($('#map-canvas-airport').length) {
var map,
    service;

jQuery(function($) {
    $(document).ready(function() {
        var lat = $('#airport-map').data('google-lat');
        var lng = $('#airport-map').data('google-lng');
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        map = new google.maps.Map(document.getElementById("map-canvas-airport"), myOptions);


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


        $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latlng);
        });
    });
});
}

在 HTML 中：

<div class="tab-pane fade" id="airport-map" data-google-lat="{{ $iata -> lat }}" data-google-lng="{{ $iata -> lng }}">
   <div id="map-canvas-airport" style="width:100%; height:500px;"></div>
</div>

Answer 1

来自谷歌文档：

var map = new google.maps.Map(...); // init the map
var lineCoordinates = [
  {lat: 1, lng: 1},
  {lat: 2, lng: 2},
  {lat: 3, lng: 3},
  {lat: 4, lng: 4}
];
var linePath = new google.maps.Polyline({
  path: lineCoordinates,
  geodesic: true,
  strokeColor: '#FF0000'
});

linePath.setMap(map);