我实际上是使用谷歌地图显示到不同地区的路由。但是对于某些区域,折线看起来不正确。它显示如下
我想要显示一条从巨港到大谷的直线,但是它也在地图的两个不同侧面也是曲线。我是否可以知道如何正确定位地图,以使线条直线而不是弯曲,也可以在一张地图中。
以下是我的代码
getLatLngOfAddress(data){
var geocoder = new google.maps.Geocoder();let latitude;let longitude;var startPoint; var endPoint;
var marker; var startCoordinates = []; var endCoordinates = []; var flightPlanCoordinates = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(40.4637, 3.7492),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
map.markers = [];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 0.5,
scale: 4
};
for(var i=0; i<data.length;i++){
let port_of_loading = data[i].port_of_loading;
let port_of_discharge = data[i].port_of_discharge
geocoder.geocode( { 'address': port_of_loading}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
}
startCoordinates.push({'lat': latitude, 'lng': longitude});
flightPlanCoordinates.push({'lat': latitude, 'lng': longitude, 'port_of_loading':port_of_loading});
startPoint = new google.maps.LatLng(latitude, longitude);
});
geocoder.geocode( { 'address': port_of_discharge}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
}
endCoordinates.push({'lat': latitude, 'lng': longitude});
flightPlanCoordinates.push({'lat': latitude, 'lng': longitude, 'port_of_discharge':port_of_discharge});
endPoint = new google.maps.LatLng(latitude, longitude);
for(var j=0; j<flightPlanCoordinates.length; j++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(flightPlanCoordinates[j].lat, flightPlanCoordinates[j].lng),
map: map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<span *ngIf="port_of_loading" class="info_content" ><strong> Port of Loading: '+flightPlanCoordinates[i].port_of_loading+'</strong>',
'<span *ngIf="port_of_discharge" class="info_content" ><strong> Port of Discharge: '+flightPlanCoordinates[i].port_of_discharge+'</strong>'
);
infowindow.open(map, marker);
}
})(marker, i));
var flightPath = new google.maps.Polyline({
path: [startPoint, endPoint],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
strokeWeight: 2
});
flightPath.setMap(map);
}
});
}
}