Question

在我的地图初始化时，会调用fitBounds，以便所有标记都可见。如果用户允许跟踪他的位置，则地图以他的位置为中心并进行缩放，以便可能发生他没有可见的标记。

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

String text = ...
text = filter(text, Filters::removeUrl, Filters::removeRepeatedWhitespace);

这会将我的地图置于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距离相同的LatLng，并向myPoint的另一个方向移动。但是有人有更好的想法吗？

Answer 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的距离和方向相同。与邓肯的答案相比，缩放更大。

Answer 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设置为零，以防止此圆圈可见。

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

2 个答案: