碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   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''事件只能綁定到一個上的問題') 百度地圖api根據詳細地址反查坐標 Vue中使用百度地圖——根據輸入框輸入的內容，獲取詳細地址 調用百度地圖API實現手機自動定位 （逆地址解析） 使用百度地圖API自動獲取地址和經緯度 仿百度自動補全jquery 百度地圖通過傳入地址實現實時定位 使用百度地圖 進行逆地址解析 使用百度地圖實現地圖網格 網頁嵌入百度地圖和使用百度地圖api自定義地圖的詳細步驟
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM