Javascript 如何通过GoogleMapAPI（Js&；php）设置中心并缩放绘制飞行路径_Javascript_Php_Google Maps

Javascript 如何通过GoogleMapAPI（Js&；php）设置中心并缩放绘制飞行路径

javascript php google-maps

Javascript 如何通过GoogleMapAPI（Js&；php）设置中心并缩放绘制飞行路径,javascript,php,google-maps,Javascript,Php,Google Maps,我正在使用谷歌地图API在我的web应用程序中绘制flightPath。我必须在两个地理点之间绘制这条路径，每个地理点都有自己的纬度和经度值。由于我是谷歌API的新手，我需要一个建议，如何设置谷歌地图的缩放和中心？这样就可以在web视图中正确地查看它。最初，我是这样使用API的 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom:

我正在使用谷歌地图API在我的web应用程序中绘制flightPath。我必须在两个地理点之间绘制这条路径，每个地理点都有自己的纬度和经度值。由于我是谷歌API的新手，我需要一个建议，如何设置谷歌地图的缩放和中心？这样就可以在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);
        }

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：{lat:，lng:}，
mapTypeId:'地形'
});
iconBase变量https://image.ibb.co/ieFup6/pin.png';
变量lineSymbol={
路径：“M 0，-1 0,1”，
频闪不透明度：1，
比例：4
};
marker1=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
位置：{lat:，lng:}
});
marker2=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
位置：{lat:，lng:}
});
var FlightPlan坐标=[
{lat:，lng:}，
{lat:，lng:}
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#504e60”，
笔划不透明度：0，
冲程重量：3，
图标：[{
图标：lineSymbol，
偏移量：“0”，
重复：“20px”
}],
});
flightPath.setMap（map）；
}

结果显示以下输出结果

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

需要建议

如何定义两点之间的中心

如何设置缩放级别

您可以尝试使用

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

函数initMap（）{
var点={
致：{
拉丁语：，
液化天然气：
},
发件人：{
拉丁语：，
液化天然气：
}
}
var bounds=new google.maps.LatLngBounds（）；
var latlng=新的google.maps.latlng（points.from.lat，points.from.lng）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：拉特林，
mapTypeId:'地形'
});
iconBase变量https://image.ibb.co/ieFup6/pin.png';
变量lineSymbol={
路径：“M 0，-1 0,1”，
频闪不透明度：1，
比例：4
};
var latlng=新的google.maps.latlng（points.to.lat，points.to.lng）；
边界扩展（latlng）；
marker1=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
职位：latlng
});
var latlng=新的google.maps.latlng（points.from.lat，points.from.lng）；
边界扩展（latlng）；
marker2=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
职位：latlng
});
var FlightPlan坐标=[
{lat:points.to.lat，lng:points.to.lng}，
{lat:points.from.lat，lng:points.from.lng}
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#504e60”，
笔划不透明度：0，
冲程重量：3，
图标：[{
图标：lineSymbol，
偏移量：“0”，
重复：“20px”
}],
});
flightPath.setMap（map）；
映射边界（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 );
}

函数initMap（）{
var点={
发件人：new google.maps.LatLng（，），
收件人：new google.maps.LatLng（，）
}
var bounds=new google.maps.LatLngBounds（）；
边界。扩展（点到）；
边界。延伸（点。从）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：点，从，
mapTypeId:'地形'
});
iconBase变量https://image.ibb.co/ieFup6/pin.png';
变量lineSymbol={
路径：“M 0，-1 0,1”，
频闪不透明度：1，
比例：4
};
marker1=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
位置：指向
});
marker2=新的google.maps.Marker({
地图：地图，
图标：iconBase，
真的，
位置：points.from
});
var FlightPlan坐标=[
指向，
点
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#504e60”，
笔划不透明度：0，
冲程重量：3，
图标：[{
图标：lineSymbol，
偏移量：“0”，
重复：“20px”
}],
});
flightPath.setMap（map）；
映射边界（bounds）；
}

您可以尝试使用

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

函数initMap（）{
var点={
致：{
拉丁语：，
液化天然气：
},
发件人：{
拉丁语：，
液化天然气：
}
}
var bounds=new google.maps.LatLngBounds（）；
var latlng=新的google.maps.latlng（points.from.lat，points.from.lng）；
var map=new google.maps.map（document.getElementById（'map'）{