如何在Google地图中的两点之间划一条线?

时间:2017-05-20 11:12:22

标签: javascript jquery google-maps

我需要在Google地图中的两个点之间画一条曲线。

如何使用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>

1 个答案:

答案 0 :(得分:1)

来自Google docs

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