我需要在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>
答案 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);