前端切圖:調用百度地圖API

時間 2019-11-24
標籤前端調用百度地圖 api 简体版
原文原文鏈接
原型圖javascript
圖片發自簡書App
<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        
        <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <!--調用百度地圖api-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true">
        </script>
        <title></title>
        <style>
            /*服務網點*/
            
            #wrap {
                width: 1196px;
                height: 540;
                margin: auto;
                overflow: hidden;
            }
            
            #wrap div ._left {
                width: 281px;
                float: left;
                height: 339px;
                border-right: 1px solid #CCCCCC;
            }
            
            #wrap ul {
                width: 1196px;
                height: 50px;
                border-bottom: 1px solid #CCCCCC;
                border-top: 1px solid #CCCCCC;
                margin-bottom: 57px;
            }
            /*搜索框城市*/
            
            #input {
                width: 360px;
                height: 37px;
                margin-left: 51px;
            }
        </style>
    </head>
    <body>

        <!--服務網點與幫助中心-->
        <div id="wrap">
        <ul></ul>

            <!--服務網點-->

            <!--百度地圖容器-->
            <div style="width: 563px; height: 435px; float: left;  margin-bottom: 142px;" id="dituContent"></div>
            <div style="float: left;">
                <input type="text" id="input" />
                
                <input type="button" onclick="searchMap();" value="搜索地圖" style="width: 160px; height: 39px;" />
            </div>
            <!--百度地圖容器結束-->

        </div>

    </body>
    <script type="text/javascript">
        //建立和初始化地圖函數：
        function initMap() {
            createMap(114.025974, 22.546054); //建立地圖
            setMapEvent(); //設置地圖事件
            addMapControl(); //向地圖添加控件
        }
        //地圖搜索
        function searchMap() {
            var area = document.getElementById("input").value; //獲得地區
            var ls = new BMap.LocalSearch(map);
            ls.setSearchCompleteCallback(function(rs) {
                if(ls.getStatus() == BMAP_STATUS_SUCCESS) {
                    var poi = rs.getPoi(0);
                    if(poi) {
                        createMap(poi.point.lng, poi.point.lat); //建立地圖(經度poi.point.lng,緯度poi.point.lat)
                        setMapEvent(); //設置地圖事件
                        addMapControl(); //向地圖添加控件
                    }
                }
            });
            ls.search(area);
        }
        //建立地圖函數：
        function createMap(x, y) {
            var map = new BMap.Map("dituContent"); //在百度地圖容器中建立一個地圖
            var point = new BMap.Point(x, y); //定義一箇中心點座標
            map.centerAndZoom(point, 12); //設定地圖的中心點和座標並將地圖顯示在地圖容器中
            window.map = map; //將map變量存儲在全局
        }
        //地圖事件設置函數：
        function setMapEvent() {
            map.enableDragging(); //啓用地圖拖拽事件，默認啓用(可不寫)
            map.enableScrollWheelZoom(); //啓用地圖滾輪放大縮小
            map.enableDoubleClickZoom(); //啓用鼠標雙擊放大，默認啓用(可不寫)
            map.enableKeyboard(); //啓用鍵盤上下左右鍵移動地圖
        }
        //地圖控件添加函數：
        function addMapControl() {
            //向地圖中添加縮放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地圖中添加縮略圖控件
            var ctrl_ove = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrl_ove);
            //向地圖中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrl_sca);
        }
        initMap(); //建立和初始化地圖
    </script>

</html>
代碼圖css
圖片發自簡書App