地图应该以一个点为中心，并且最近的标记应该是可见的答案

【问题标题】：Map should be centered to a point and the nearest marker should be visible地图应该以一个点为中心，并且最近的标记应该是可见的
【发布时间】：2016-05-21 13:04:06
【问题描述】：

在我的地图初始化时，调用了 fitBounds，以便所有标记都可见。如果用户允许跟踪他的位置，则地图以他的位置为中心并缩放，因此他可能看不到任何标记。

如果用户允许跟踪他的位置，地图应该以他的位置为中心，但需要调整缩放以使最近的标记可见。

var myPoint = new google.maps.LatLng(35.158868, -91.419260);
var myBounds = new google.maps.LatLngBounds();
var myOriginPoint = new google.maps.LatLng(33.126255, -89.531347);
myBounds.extend(myPoint);
myBounds.extend(myOriginPoint);
map.fitBounds(myBounds);

这将使我的地图在myPoint 和myOriginPoint 之间居中，但中心应该是myOriginPoint，myPoint 处的标记也应该可见。我可以计算出一个与myPoint 相同的距离并朝myOriginPoint 的另一个方向移动的LatLng。但是有人有更好的主意吗？

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry"></script>
    <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById("map"), {
              center: {lat: 0, lng: 0},
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var myPoint = new google.maps.LatLng(51.514274, 7.467514);
            var myOriginPoint = new google.maps.LatLng(50.132168, 8.737313);

            var marker1 = new google.maps.Marker({
                position: myPoint,
                icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red.png',
                map: map
            });
            var marker2 = new google.maps.Marker({
                position: myOriginPoint,
                icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png',
                map: map
            });

            var distance = google.maps.geometry.spherical.computeDistanceBetween(myPoint, myOriginPoint);
            var heading = google.maps.geometry.spherical.computeHeading(myPoint, myOriginPoint);
            var pointB = myOriginPoint.destinationPoint(heading, distance / 1000);

            var myBounds = new google.maps.LatLngBounds();
            myBounds.extend(myPoint);
            myBounds.extend(myOriginPoint);
            myBounds.extend(pointB);
            map.fitBounds(myBounds);

            map.fitBounds(myBounds);
        }

        Number.prototype.toRad = function() {
            return this * Math.PI / 180;
        }

        Number.prototype.toDeg = function() {
            return this * 180 / Math.PI;
        }

        google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
            dist = dist / 6371;  
            brng = brng.toRad();  

            var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();

            var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + 
                                Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));

            var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
                                        Math.cos(lat1), 
                                        Math.cos(dist) - Math.sin(lat1) *
                                        Math.sin(lat2));

            if (isNaN(lat2) || isNaN(lon2)) return null;

            return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

计算的点与myPoint 到myOriginPoint 的距离和方向相同。和邓肯的回答相比，变焦更大了。

【讨论】：

【解决方案2】：

这似乎对我有用。
计算两点之间的直线距离。
让它成为一个圆的半径，以myOriginPoint为中心。
找出圆的界限。扩展您的界限以适应这些界限。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry"></script>
    <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById("map"), {
              center: {lat: 0, lng: 0},
              zoom: 3,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var myPoint = new google.maps.LatLng(35.158868, -91.419260);
            var myOriginPoint = new google.maps.LatLng(33.126255, -89.531347);

            var marker1 = new google.maps.Marker({
                position: myPoint,
                icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red.png',
                map: map
            });
            var marker2 = new google.maps.Marker({
                position: myOriginPoint,
                icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png',
                map: map
            });

            var distance = google.maps.geometry.spherical.computeDistanceBetween(myPoint, myOriginPoint);

            var circle = new google.maps.Circle({
                fillColor: "#009900",
                fillOpacity: 0.25,
                strokeColor: "#00FF00",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                center: myOriginPoint,
                radius: distance,
                map: map
            });

            var myBounds = circle.getBounds();

            map.fitBounds(myBounds);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

这是一个截图展示：

您需要做的就是将 fillOpacity 和 strokeOpacity 设置为零，以防止该圆圈可见。

【讨论】：

某些位置的缩放太小，所以我尝试了一种不同的方法来提供更大的缩放。看看我的回答。