百度地圖之自動提示--autoComplete

時間 2019-11-15
標籤百度地圖自動提示 autocomplete 简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>百度地圖之自動提示--autoComplete</title>
</head>
<body>
<button id="btn1">將深圳設置爲檢索區域</button>
<button id="btn2">將上海設置爲檢索區域</button>
<input id="register2suggestId" size="30" type="text" class="w-100-nick" placeholder="請輸入"/>
<div id="register2map" style="width:300px;height:200px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUHewhg0KDCnZa5emK9hxRib&callback=init"></script>
<script>

    window.windowMapBusiness = {
        //建立和初始化地圖函數：
        initMap: function (id, addr, s) {
            this.createMap(id, addr, s);//建立地圖
            this.setMapEvent();//設置地圖事件
            this.addMapControl();//向地圖添加控件
        },
        //建立地圖函數：
        createMap: function (id, addr, s) {
            s = s ? s : 8;
            window.map = new BMap.Map(id);// 將map變量存儲在全局 在百度地圖容器中建立一個地圖
            if (addr) {
                map.centerAndZoom(addr, s);//設定地圖的中心點和座標並將地圖顯示在地圖容器中
            } else {
                var geolocation = new BMap.Geolocation();  //實例化定位對象。
                geolocation.getCurrentPosition(function (r) {   //定位結果對象會傳遞給r變量 r.point.lng 經度 r.point.lat 緯度
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {  //經過Geolocation類的getStatus()能夠判斷是否成功定位。
                        map.centerAndZoom(r.point, s);//設定地圖的中心點和座標並將地圖顯示在地圖容器中
                        var mk = new BMap.Marker(r.point);    //基於定位的這個點的點位建立marker
                        map.addOverlay(mk);    //將marker做爲覆蓋物添加到map地圖上
                        map.panTo(r.point);   //將地圖中心點移動到定位的這個點位置。注意是r.point而不是r對象。
                    } else {
                        map.centerAndZoom('廣東省深圳市', s);//設定地圖的中心點和座標並將地圖顯示在地圖容器中
                    }
                }, {enableHighAccuracy: true});
            }
        },
        //地圖事件設置函數：
        setMapEvent: function () {
            map.enableScrollWheelZoom();//啓用地圖滾輪放大縮小
            map.enableKeyboard();//啓用鍵盤上下左右鍵移動地圖
            //map.disableDragging();     //禁止拖拽
//            map.enableDragging();   // 開啓拖拽
            map.enableInertialDragging();   // 開啓慣性拖拽
        },
        //地圖控件添加函數：
        addMapControl: function (sc) {
            //向地圖中添加縮放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地圖中添加縮略圖控件
            if (sc) {
                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);
            }
        },
        // 設置單個標註-有單行提示文字
        addMarker: function (addr, sc, lf, top) {
            map.clearOverlays();//清除全部標註
            new BMap.Geocoder().getPoint(addr, function (point) {
                if (point) {
                    var sc = sc ? sc : 8,
                            lf = lf ? lf : 10 - addr.length * 6,//百度地圖標註字體12px
                            top = top ? top : -20,
                            address = new BMap.Point(point.lng, point.lat);
                    map.centerAndZoom(address, sc);
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    marker.setLabel(new BMap.Label(addr, {offset: new BMap.Size(lf, top)}));
                }
            });
        },

//處理地址--傳入地址、函數 處理經緯度等 執行環境window  賦值經過scope 如 $scope.Lon=point.lng; $scope.Lat=point.lat;
        responseAddr: function (addr, fun) {
            new BMap.Geocoder().getPoint(addr, function (point) {
                if (point) {//point.lng  point.lat
                    fun(point);
                }
            });
        },
//百度地圖自動提示 -（未解決）仍是檢索的上一次的區域
        autoComplete: function (suggestId, setLocation, keywords, sc, lf, top) {// id必填 keywords-array 其他-string
            var me = this,
            //創建一個自動完成的對象
                    ac = new BMap.Autocomplete({
                        "input": suggestId, //輸入框id
                        "location": setLocation//設定返回結果的所屬範圍
                    }),
                    iptTrigger = document.getElementById(suggestId);

            //刪除多餘的元素，但百度地圖自動生成的js報錯 報錯並不影響提示功能  暫設置爲隱藏多餘元素
            function hideRestAcBox() {
                var elm = Array.prototype.slice.call(document.getElementsByClassName('tangram-suggestion-main'));
                if (elm.length) {
                    elm.forEach(function (v, i) {
//        v.parentNode.removeChild(v);
                        v.style.zIndex = -1;
                        v.style.visibility = 'hidden';
                    });
                    elm[elm.length - 1].style.zIndex = 999;
                    elm[elm.length - 1].style.visibility = 'visible';
                }
            }

            function hideAcBox() {
                var elm = Array.prototype.slice.call(document.getElementsByClassName('tangram-suggestion-main'));
                elm.forEach(function (v, i) {
                    v.style.zIndex = -1;
                    v.style.visibility = 'hidden';
                });
            }

            //輸入框的值控制 提示信息列表容器顯示隱藏
            function boxHide() {
                console.log(this.value);
                if (this.value) {
                    if (keywords) {//發起某個關鍵字的提示請求，會引發onSearchComplete的回調
                        ac.search.apply(ac, keywords);
                    }
                    hideRestAcBox();
                } else {
                    hideAcBox();
                }
            }

            iptTrigger.oninput = boxHide;//非ie
            iptTrigger.onpropertychange = boxHide;//ie
            //鼠標點擊下拉列表後的事件
            ac.addEventListener("onconfirm", function (e) {
                hideAcBox();
                var _value = e.item.value;
                var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                console.log(myValue);
                me.addMarker(myValue, sc, lf, top);
            });
        }

    };


    document.getElementById('btn1').onclick = function () {
        console.log(1);

        windowMapBusiness.autoComplete('register2suggestId', '深圳市', ['大廈', '樓', '大學', '校區', '學院', '中專', '中學', '小學', '幼兒園']);

    };
    document.getElementById('btn2').onclick = function () {
        console.log(2);

        windowMapBusiness.autoComplete('register2suggestId', '上海市', ['大廈', '樓', '大學', '校區', '學院', '中專', '中學', '小學', '幼兒園']);

    };

    setTimeout(function () {
        windowMapBusiness.initMap('register2map', '深圳');
    }, 1000);
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。