javascript - 如何正确定位我的地图以正确设置折线？

问题描述

我实际上正在使用谷歌地图显示到不同地区的路线。但是，对于某些区域，折线显示不正确。它显示如下

我想展示一条从巨港到大谷的直线，但它在地图的两个不同侧面也采用了曲线。我可以知道如何正确定位地图，以使线条笔直而不弯曲，并且在一张地图中。

以下是我的代码

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

        });
    }
}

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

javascript - 如何正确定位我的地图以正确设置折线？

问题描述

解决方案

推荐阅读