使用百度地圖實現詳細地址自動補全

本文轉載自查看原文 2017-12-24 19:49 1777 使用百度地圖實現詳細地址自動補全/ bug

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地址選擇</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}
        #l-map{height:500px;width:100%;}
        #r-result{width:100%;}
    </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EG3bwH1OHAQZMbDYU5Cuq5Zc935lhmFn"></script>
</head>

<body>
<div id="r-result"><input type="text" id="suggestId" size="20"  style="width:500px;height:30px" placeholder="請輸入地址"/>
    <input type="button" onclick="addrSearch()" class="btn btn-danger" value="搜索" style="width: 150px;height: 35px">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map"></div>
<script type="text/javascript">
    var marker;
    var zoomSize = 18;
    var map = new BMap.Map("l-map");
    var lon = 116.404;  //默認為北京市
    var lat= 39.915;

    //業務處理，獲取業務中的經緯度，有則處理，沒有則用默認北京
    if(typeof getBizPoint == "function"){
        var pointJson = getBizPoint();
        lon = pointJson.lon;
        lat = pointJson.lat;
    }

    //確定中心位置
    var point = new BMap.Point(lon, lat);
    map.centerAndZoom(point, zoomSize);


    //標注
    marker = new BMap.Marker(point);// 創建標注
    map.addOverlay(marker);             // 將標注添加到地圖中
    marker.enableDragging();           // 可拖拽
    marker.addEventListener("dragend", setBizValue);

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

    var geoc = new BMap.Geocoder();


    //輸入地址事件處理 start
    var ac = new BMap.Autocomplete(    //建立一個自動完成的對象
            {"input" : "suggestId"
                ,"location" : map
            });

    ac.addEventListener("onhighlight", function(e) {  //鼠標放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var 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;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地圖上所有覆蓋物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //獲取第一個智能搜索的結果
            setBizValueForPoint(pp);
            map.centerAndZoom(pp, zoomSize);
            marker = new BMap.Marker(pp);
            marker.enableDragging();           // 可拖拽
            map.addOverlay(marker);    //添加標注
            marker.addEventListener("dragend", setBizValue);
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    function G(id) {
        return document.getElementById(id);
    }
    //輸入地址事件處理 end


    //地址轉坐標
    function addrSearch(serachAddr){
       // 創建地址解析器實例
        var myGeo = new BMap.Geocoder();
        // 將地址解析結果顯示在地圖上,並調整地圖視野
        if(!serachAddr){
            serachAddr = $("#suggestId").val();
        }
        myGeo.getPoint(serachAddr, function(point){
            if (point) {
                setBizValueForPoint(point);
                map.clearOverlays();
                map.centerAndZoom(point, zoomSize);
                marker = new BMap.Marker(point);
                marker.enableDragging();           // 可拖拽
                map.addOverlay(marker);    //添加標注
                marker.addEventListener("dragend", setBizValue);

            }else{
                console.log("search click no results!")
            }
        });

    }

    //業務方法 start
    //根據事件，設置經緯度和地址
    function setBizValue(e){
        var point = e.point;
        setBizValueForPoint(point);
    }

    //根據Point，設置經緯度和地址
    function setBizValueForPoint(point){
        lon = point.lng;
        lat = point.lat;
        geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            addr = addComp.province + addComp.city + addComp.district  + addComp.street + addComp.streetNumber;
            if(typeof setBizFun == "function"){
                setBizFun({lon:lon,lat:lat,addr:addr});
            }
        });

    }

    //根據marker，設置經緯度和地址
    function setBizValueForMarker(){
        var point = marker.getPosition();
        setBizValueForPoint(point);
    }

    //end

</script>
</body>
</html>

簡潔版的檢索

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地址選擇</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}
        
        #r-result{width:100%;}
    </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EG3bwH1OHAQZMbDYU5Cuq5Zc935lhmFn"></script>
</head>

<body>
<div id="r-result"><input type="text" id="suggestId" size="20"  style="width:500px;height:30px" placeholder="請輸入地址"/>
    <input type="button" onclick="addrSearch()" class="btn btn-danger" value="搜索" style="width: 150px;height: 35px">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map"></div>
<script type="text/javascript">
    var marker;
    var zoomSize = 18;
    var map = new BMap.Map("l-map");
    var lon = 116.404;  //默認為北京市
    var lat= 39.915;

    //業務處理，獲取業務中的經緯度，有則處理，沒有則用默認北京
    if(typeof getBizPoint == "function"){
        var pointJson = getBizPoint();
        lon = pointJson.lon;
        lat = pointJson.lat;
    }
    //確定中心位置
    var point = new BMap.Point(lon, lat);
    map.centerAndZoom(point, zoomSize);
    //標注
    marker = new BMap.Marker(point);// 創建標注
    marker.addEventListener("dragend", setBizValue);

    // 添加帶有定位的導航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE類型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 啟用顯示定位
        enableGeolocation: true
    });
    //輸入地址事件處理 start
    var ac = new BMap.Autocomplete(    //建立一個自動完成的對象
            {"input" : "suggestId"
                ,"location" : map
            });

    ac.addEventListener("onhighlight", function(e) {  //鼠標放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var 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;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function G(id) {
        return document.getElementById(id);
    }
    //業務方法 start
    //根據事件，設置經緯度和地址
    function setBizValue(e){
        var point = e.point;
        setBizValueForPoint(point);
    }
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用百度地圖實現詳細地址自動補全(補全bug''事件只能綁定到一個上的問題') 百度地圖--地址逆向解析在線地圖，如百度地圖是怎么實現的？ Vue 使用百度地圖實現搜索定位百度地圖之自動提示--autoComplete html5移動端根據百度地圖api獲取詳細地址百度地圖通過地址檢索定位地圖、通過點擊位置獲取經緯度、詳細地址、城市碼基於vue實現百度離線地圖百度地圖多點標注實現百度地圖實現定位功能