玩轉百度地圖API（地圖,坐標,標記,添加控制項,2D圖,混合圖,智慧搜索,地址解析器,資訊窗口) - ⎝⎛CodingNote.cc ⎞⎠

玩轉百度地圖API（地圖,坐標,標記,添加控制項,2D圖,混合圖,智慧搜索,地址解析器,資訊窗口)

2020 年 11 月 23 日
筆記
HTML+CSS

1.註冊得到appkey

2.直接上程式碼

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: "微軟雅黑";
        }
        
        p {
            margin-left: 5px;
            font-size: 14px;
        }
        
        #container {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        #point {
            display: none;
        }
        
        .search {
            margin-bottom: 10px;
            height: 30px;
            margin: 0 auto;
            width: 300px;
        }
        
        .center {
            height: 650px;
            width: 1200px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxx"></script>
    <title>BaiduMap</title>
</head>

<body>
    <header class="search">
        <input type="search" name="txtSearch" id="txtSearch">
        <button id="btnSearch">搜索</button>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </header>
    <div class="center">
        <span id="point"></span>
        <div id="container"></div>
    </div>
    <script type="text/javascript">
        var btnSearch = document.querySelector('#btnSearch');

        function initMap(point) {

            //默認天安門
            point = point || {
                lng: 116.403955,
                lat: 39.915112
            };
            //地圖
            let map = new BMap.Map('container');

            //坐標
            let poi = new BMap.Point(point.lng, point.lat);

            //標記
            let marker = new BMap.Marker(poi);

            //帶有定位的導航控制項
            let navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE類型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 啟用顯示定位
                enableGeolocation: true
            });

            //定位控制項
            let geolocationControl = new BMap.GeolocationControl();

            // 比例尺控制項
            let scaleCtrl = new BMap.ScaleControl();

            //2D圖，混合圖
            let mapType = new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                anchor: BMAP_ANCHOR_TOP_LEFT
            });
            //默認縮略地圖控制項
            let overView = new BMap.OverviewMapControl();

            //右下角，打開
            let overViewOpen = new BMap.OverviewMapControl({
                isOpen: true,
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT
            });

            //右鍵菜單
            let menu = new BMap.ContextMenu();

            //建立一個自動完成的對象
            let ac = new BMap.Autocomplete({
                "input": "txtSearch",
                "location": map
            });

            //地址解析器
            let geoc = new BMap.Geocoder();

            //資訊窗口
            let infoWindow = new BMap.InfoWindow();

            //let local = new BMap.LocalSearch(map);

            // 比例尺控制項 BMapGL才支援
            // let zoomCtrl = new BMap.ZoomControl(); 

            // 3D控制項 BMapGL才支援
            // var navi3DCtrl = new BMap.NavigationControl3D();

            // 初始化地圖,設置中心點坐標和地圖級別
            map.centerAndZoom(poi, 16);

            //開啟滑鼠滾輪縮放
            map.enableScrollWheelZoom(true);

            //添加標記
            map.addOverlay(marker);

            //添加帶有定位的導航控制項
            map.addControl(navigationControl);

            //添加定位控制項
            map.addControl(geolocationControl);

            //添加比例尺控制項
            map.addControl(scaleCtrl);

            //添加2D圖，混合圖
            map.addControl(mapType);

            //添加默認縮略地圖控制項
            map.addControl(overView);

            //添加右下角，打開
            map.addControl(overViewOpen);

            let txtMenuItem = [{
                text: '放大一級',
                callback: function() {
                    map.zoomIn();
                }
            }, {
                text: '縮小一級',
                callback: function() {
                    map.zoomOut();
                }
            }];

            for (const item of txtMenuItem) {
                menu.addItem(new BMap.MenuItem(item.text, item.callback, 100));
            }

            //添加右鍵菜單
            map.addContextMenu(menu);

            //添加比例尺控制項 BMapGL才支援
            // map.addControl(zoomCtrl);

            //添加3D控制項 BMapGL才支援
            // map.addControl(navi3DCtrl);

            //定位成功事件
            geolocationControl.addEventListener("locationSuccess", (e) => {
                setCenterAndMarker(map, marker, e.point);
            });

            //地圖點擊事件
            map.addEventListener('click', (e) => {
                setCenterAndMarker(map, marker, e.point);
            });

            //滑鼠放在下拉列表上的事件
            ac.addEventListener("onhighlight", (e) => {

                const str = getHighLightContent(e);

                document.getElementById("searchResultPanel").innerHTML = str;
            });

            //搜索事件
            btnSearch.addEventListener('click', (e) => {

                var txtSearch = document.getElementById('txtSearch').value;

                function onSearchComplete() {

                    let pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜索的結果

                    setCenterAndMarker(map, marker, pp);
                }

                //智慧搜索
                let local = new BMap.LocalSearch(map, {
                    onSearchComplete: onSearchComplete
                });

                try {
                    local.search(txtSearch);
                } catch (error) {

                }
            });

            //標註點擊事件
            marker.addEventListener('click', (e) => {

                geoc.getLocation(e.point, function(res) {

                    var addComp = res.addressComponents;

                    const sContent = `<h4 style='margin:0 0 5px 0;'>${res.address}</h4>
                                    <p>城市:${addComp.city}</p>
                                    <p>市區:${addComp.district}</p>
                                    <p>街道:${addComp.street}</p>
                                    <p>街道號:${addComp.streetNumber}</p>
                                    <p>坐標:${Object.values(res.point).toString()}</p>`;

                    infoWindow.setContent(sContent);

                    marker.openInfoWindow(infoWindow);

                    infoWindow.redraw();
                });

            });
        }

        //獲取文本內容
        function getHighLightContent(e) {

            let str = "";

            let _value = e.fromitem.value;

            let value = "";

            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }

            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";

            if (e.toitem.index > -1) {

                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }

            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

            return str;
        }

        //設置中心和標註
        function setCenterAndMarker(map, marker, pp) {

            map.setCenter(pp); //設置中心坐標

            map.clearOverlays(); //移除原有的標註

            marker.setPosition(pp); //設置坐標

            map.addOverlay(marker); //添加標註
        }

        initMap();
    </script>
</body>

</html>

Previous post

[head first 設計模式]第二章觀察者模式

Next post

MFC讀寫文件詳解