Question

我正在使用 GOOGLE MAPS API 在我的网络应用程序中绘制flightPath。我必须在两个地理点之间绘制这条路径，每个地理点都有自己的纬度和经度值。由于我是谷歌APIS的新用户，我需要一个建议，如何设置GOOGLE MAP的缩放和中心？这样就可以在Web视图中正确查看。最初，我正在以这种方式使用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);
        }

结果显示跟随

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

需要建议

如何在两点之间定义中心？
如何设置缩放级别？

Answer 1

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

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

如何通过谷歌地图api设置中心和缩放绘制飞行路径（Js＆amp; php）

1 个答案: