Javascript 地图应居中于一点，最近的标记应可见_Javascript_Google Maps_Google Maps Api 3

Javascript 地图应居中于一点，最近的标记应可见

javascript google-maps google-maps-api-3

Javascript 地图应居中于一点，最近的标记应可见,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在我的地图初始化时，会调用fitBounds，以便所有标记都可见。如果用户允许跟踪他的位置，则地图将以他的位置为中心并进行缩放，这样他就可能看不到任何标记如果用户允许跟踪其位置，则地图应以其位置为中心，但需要调整缩放以使最近的标记可见 var myPoint = new google.maps.LatLng(35.158868, -91.419260); var myBounds = new google.maps.LatLngBounds(); var myOriginPoint = new

在我的地图初始化时，会调用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

的距离相同的LatLng，并朝

myOriginPoint

的另一个方向移动。但是有谁有更好的主意吗？

这似乎对我很有效。
计算两点之间的直线距离。
让它成为以

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>


html，body，#map{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：{lat:0，lng:0}，
缩放：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=新的google.maps.Marker({
位置：myPoint，
图标：'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red.png',
地图：地图
});
var marker2=新的google.maps.Marker({
位置：myOriginPoint，
图标：'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png',
地图：地图
});
var distance=google.maps.geometry.sphereal.ComputedDistanceBeween（myPoint，MyOrginPoint）；
var circle=new google.maps.circle({
填充颜色：“009900”，
填充不透明度：0.25，
strokeColor:#00FF00“，
笔划不透明度：1.0，
冲程重量：1，
中心：myOriginPoint，
半径：距离，
地图：地图
});
var myBounds=circle.getBounds（）；
map.fitBounds（myBounds）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

下面是一个屏幕截图，演示：

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


<!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>

html，body，#map{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：{lat:0，lng:0}，
缩放：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.7313）；
var marker1=新的google.maps.Marker({
位置：myPoint，
图标：'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red.png',
地图：地图
});
var marker2=新的google.maps.Marker({
位置：myOriginPoint，
图标：'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png',
地图：地图
});
var distance=google.maps.geometry.sphereal.ComputedDistanceBeween（myPoint，MyOrginPoint）；
var heading=google.maps.geometry.sphereal.computeHeading（myPoint，myOriginPoint）；
var pointB=MyOrginPoint.destinationPoint（航向，距离/1000）；
var myBounds=new google.maps.LatLngBounds（）；
扩展（myPoint）；
扩展（myOriginPoint）；
扩展（pointB）；
map.fitBounds（myBounds）；
map.fitBounds（myBounds）；
}
Number.prototype.toRad=函数（）{
返回这个*Math.PI/180；
}
Number.prototype.toDeg=函数（）{
返回这个*180/Math.PI；
}
google.maps.LatLng.prototype.destinationPoint=函数（brng，dist）{
dist=dist/6371；
brng=brng.toRad（）；
var lat1=this.lat（）.toRad（），lon1=this.lng（）.toRad（）；
var lat2=数学asin（数学sin（lat1）*数学cos（距离）+
数学cos（lat1）*数学sin（dist）*数学cos（brng））；
变量lon2=lon1+Math.atan2（Math.sin（brng）*Math.sin（dist）*
数学cos（lat1），
Math.cos（dist）-Math.sin（lat1）*
sin（lat2））；
if（isNaN（lat2）| isNaN（lon2））返回null；
返回新的google.maps.LatLng（lat2.toDeg（），lon2.toDeg（））；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

计算的点与

myPoint

到

myOriginPoint

的距离和方向相同。与邓肯的答案相比，变焦更大

某些位置的缩放太小，因此我尝试了一种不同的方法，可以获得更大的缩放。看看我的答案。