動態將所有點放在最佳視野內-百度地圖

原創

2020-02-21 14:49

功能描述
經緯度座標是一個一個從後臺取出，加載在地圖上，確保所有點都在屏幕之內

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>動態將所有點放在最佳視野方位內</title>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="0" />
        <script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    </head>
    <body style="padding: 0; background: #f7f7f7;">
        動態將所有點放在最佳視野方位內（每隔3秒新增一個點）
        <!--百度地圖容器-->
        <div style="width:500px;height:560px;" id="allmap"></div>
        </div>
        <script type="text/javascript">
            var map = new BMap.Map("allmap");    // 創建Map實例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            map.enableScrollWheelZoom();   //啓用滾輪放大縮小，默認禁用
            map.enableContinuousZoom();    //啓用地圖慣性拖拽，默認禁用
            var pointsView = [];    //存放點的數組
            window.setInterval(createPt, 3 * 1000); //設置動態加點，3秒一次
            function createPt() {
                var pt = new BMap.Point(Math.random()*40 + 85, Math.random() * 30 + 21);
                pointsView.push(pt);
                var marker = new BMap.Marker(pt);
                map.addOverlay(marker);
                map.setViewport(pointsView); //將所有的點放置在最佳視野內
            }
        </script>
    </body>
</html>