简体   繁体   English

根据谷歌地图结果缩放

[英]Zooming based on Google Maps result

This is my current code:这是我当前的代码:

$scope.search = function(){
    Request.googleAPI($scope.searchForm).then(function(data){
        console.log("Search result: ")
        console.log(data)
        var actualZoom = map.getView().getZoom();
        console.log("Zoom level: " + actualZoom)
        var point = [data.data.results[0].geometry.location.lng, data.data.results[0].geometry.location.lat];
        var size = /** @type {ol.Size} */ (map.getSize());
        view.centerOn(ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857'), size, [size[0]/2, size[1]/2]);
        /*
        map.setView(new ol.View({
            projection: 'EPSG:4326',
            center: [long, lat], //long,lat
            zoom: actualZoom
        }));
        */
    })
}

I've tried using what is commented at the bottom (suggested on SO).我试过使用底部评论的内容(建议在 SO 上)。 I adapted it to only use "zoom", but it would turn my map white.我将其调整为仅使用“缩放”,但它会将我的地图变成白色。

The Google Maps request contains the geometry-point location (lat/lng), but also the bounding box, which should determine the zoom level. Google Maps 请求包含几何点位置 (lat/lng),还包含边界框,它应该确定缩放级别。 How do I use this bounding box to properly update my map?如何使用此边界框正确更新我的地图?

If you need to see some more code, here is the complete script I'm using.如果您需要查看更多代码,这里是我正在使用的完整脚本

Resolved my problem with maths!解决了我的数学问题!

$scope.search = function(){
    Request.googleAPI($scope.searchForm).then(function(data){

        var point = [data.data.results[0].geometry.location.lng, data.data.results[0].geometry.location.lat];
        var size = /** @type {ol.Size} */ (map.getSize());
        view.centerOn(ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857'), size, [size[0]/2, size[1]/2]);

        // To adjust Zoom Level
        var bound = data.data.results[0].geometry.viewport;
        var east = bound.northeast.lng
        var west = bound.southwest.lng
        var zoom = 9 - Math.floor(Math.log(Math.abs(west-east))/Math.log(2));
        map.getView().setZoom(zoom);
    })
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM