javascript - 如何通过谷歌地图API(Js和php)设置中心和缩放绘制飞行路径

Question

我正在使用 GOOGLE MAPS API 在我的网络应用程序中绘制飞行路径。我必须在两个地理点之间绘制这条路径，每个地理点都有自己的纬度和经度值。由于我是 google APIS 的新手，我需要建议如何设置 GOOGLE MAP 的缩放和中心？以便可以在 WebView 中正确查看。最初，我是这样使用API​​的

  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>},
                mapTypeId: 'terrain'
            });
            var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
            var lineSymbol = {
                path: 'M 0,-1 0,1',
                strokeOpacity: 1,
                scale: 4
            };
            marker1 = new google.maps.Marker({
                map: map,
                icon: iconBase,
                draggable: true,
                position: {lat: <?= $to_lat ?>, lng: <?= $to_lng ?>}
            });
            marker2 = new google.maps.Marker({
                map: map,
                icon: iconBase,
                draggable: true,
                position: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}
            });

            var flightPlanCoordinates = [
                {lat: <?= $to_lat ?>, lng: <?= $to_lng ?>},
                {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}

            ];
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#504e60',
                strokeOpacity: 0,
                strokeWeight: 3,
                icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '20px'
                    }],
            });

            flightPath.setMap(map);
        }

结果显示以下输出

我需要这个缩放级别足够公平，以便我可以在移动屏幕上正确可见。当我增加缩放时，它将 map 拉到中心(正如我在缩放下设置的那样)。

需要建议

1. 如何定义两点之间的中心？
2. 如何设置缩放级别？

Answer 1

您可以尝试使用 LatLngBounds 类，在调用 fitBounds 方法之前添加您想要包含的任何/所有 latlng 坐标。

function initMap() {
    var points={
        to:{
            lat:<?= $to_lat ?>,
            lng:<?= $to_lng ?>
        },
        from:{
            lat:<?= $from_lat ?>,
            lng:<?= $from_lng ?>
        }
    }
    var bounds = new google.maps.LatLngBounds();
    var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: latlng,
        mapTypeId: 'terrain'
    });
    var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
    };

    var latlng=new google.maps.LatLng( points.to.lat, points.to.lng );
    bounds.extend( latlng );
    marker1 = new google.maps.Marker({
        map: map,
        icon: iconBase,
        draggable: true,
        position: latlng
    });

    var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
    bounds.extend( latlng );
    marker2 = new google.maps.Marker({
        map: map,
        icon: iconBase,
        draggable: true,
        position: latlng
    });

    var flightPlanCoordinates = [
        {lat: points.to.lat, lng: points.to.lng },
        {lat: points.from.lat, lng: points.from.lng }

    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#504e60',
        strokeOpacity: 0,
        strokeWeight: 3,
        icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            }],
    });

    flightPath.setMap( map );
    map.fitBounds( bounds );
}

<小时/>

或者，上面的稍微简化的版本

function initMap() {
    var points={
        from:new google.maps.LatLng( <?= $from_lat ?>,<?= $from_lng ?> ),
        to:new google.maps.LatLng( <?= $to_lat ?>,<?= $to_lng ?> )
    }
    var bounds = new google.maps.LatLngBounds();
        bounds.extend( points.to );
        bounds.extend( points.from );

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: points.from,
        mapTypeId: 'terrain'
    });
    var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
    };


    marker1 = new google.maps.Marker({
        map: map,
        icon: iconBase,
        draggable: true,
        position: points.to
    });
    marker2 = new google.maps.Marker({
        map: map,
        icon: iconBase,
        draggable: true,
        position: points.from
    });

    var flightPlanCoordinates = [
        points.to,
        points.from
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#504e60',
        strokeOpacity: 0,
        strokeWeight: 3,
        icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            }],
    });

    flightPath.setMap( map );
    map.fitBounds( bounds );
}