獲取地圖的資訊到input裡

雨中笑發表於2018-08-23
地圖

在最近專案中，我接觸了百度地圖的API寫法，對其中的程式碼有了一點興趣，所以我在完成任務後，在辦公室裡學習了百度地圖的相關引用，並申請了服務祕鑰： E7PCho0sv3FdzmjC901ttP0HrS9bT4nY

下面是我在學習中總結的對專案有幫助的程式碼

<!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>Hello, World</title>  
<script type="text/javascript" src="jQuery1.7.2.js"></script>
<script type="text/javascript" src="map.jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E7PCho0sv3FdzmjC901ttP0HrS9bT4nY"></script>
</head>  
 
<body>  
<div  class="bMap" style="width:500px;height: 500px;margin:auto;padding-top:100px;">
     <table>
        <td>
            <div id="r-result"><input type="text" name="address" id="suggestId" size="20" datatype="*" value="" style="width:400px;margin-bottom: 5px;padding:3px" /></div>
            <input type="hidden" name="address_lat" id="address_lat" value=""/>
            <input type="hidden" name="address_lng" id="address_lng" value=""/>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <div id="l-map" style="width:400px;height: 400px;"></div>
        </td>
    </tr>
</table>
    
</div> 
<script type="text/javascript">
    // 百度地圖API功能
    function G(id) {
        return document.getElementById(id);
    }
    var map = new BMap.Map("l-map");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,14);


    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

    map.enableScrollWheelZoom();    //啟用滾輪放大縮小，預設禁用
    map.enableContinuousZoom();
    map.addControl(new BMap.NavigationControl());  //新增預設縮放平移控制元件
    map.addControl(new BMap.OverviewMapControl()); //新增預設縮略地圖控制元件
    var ac = new BMap.Autocomplete(    //建立一個自動完成的物件
            {"input" : "suggestId"
                ,"location" : map
            });
    var geoc = new BMap.Geocoder();
    map.addEventListener("click", function(e){
        //通過點選百度地圖，可以獲取到對應的point, 由point的lng、lat屬性就可以獲取對應的經度緯度
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            //addressComponents物件可以獲取到詳細的地址資訊
            var addComp = rs.addressComponents;
            var site = addComp.province+addComp.city+ addComp.district+addComp.street+ addComp.streetNumber;
            //將對應的HTML元素設定值
            // setMyPoint(pt.lng,pt.lat);
            $("#suggestId").attr("value",site);
            console.log("獲取到的位置的詳情=="+site);
            console.log("獲取到的位置的lng=="+pt.lng);
            console.log("獲取到的位置的lat=="+pt.lat);

        });
    });
    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;
        // console.log(_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 setMyPoint(lng,lat) {
        $("#address_lng").attr("value",lng)
        $("#address_lat").attr("value",lat)
    }
    function setPlace(){
        map.clearOverlays();    //清除地圖上所有覆蓋物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //獲取第一個智慧搜尋的結果
            //獲取座標
            setMyPoint(pp.lng,pp.lat);
            console.log("lng=="+ pp.lng+";lat=="+pp.lat);
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //新增標註
        }
        var local = new BMap.LocalSearch(map, { //智慧搜尋
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script> 
</body>  
</html>

map.jquery.min.js

$.fn.bMap=function(h){h=$.extend({name:"map"},h);var j=$(this),b=h.name,p,m=116.331398,l=39.897445,q,a,n=$("<div class=`map-warp` id=`Map_"+b+"`></div"),o=$("<input type=`text` name=`"+b+"` id=`Map_input_"+b+"`/>"),g=$("<input type=`hidden` name=`location_"+b+"` id=`Map_location_"+b+"`/>"),f=$(`<svg t="1495288306982" class="icon" style="position: absolute;right:5px;top:50%;margin-top: -10px;" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M883.3663 412.6822c0-203.9497-165.3527-369.3186-369.3347-369.3186-203.9811 0-369.3337 165.3679-369.3337 369.3186 0 114.989 52.5405 217.6864 134.9211 285.4175l190.8474 200.2232c9.8307 13.246 25.5877 21.8352 43.3424 21.8352 16.3706 0 31.0232-7.2981 40.9139-18.8023h0.006995543838574828l200.5313-208.9993c17.6088-15.1997 33.7645-32.0373 48.2363-50.2719l8.1298-8.4733h-1.5949839951950608C856.0917 572.0042 883.3663 495.532 883.3663 412.6822zM513.9646 596.0299c-112.971 0-204.5377-91.5619-204.5377-204.5073 0-112.9674 91.5667-204.5293 204.5377-204.5293 112.9501 0 204.5157 91.5629 204.5157 204.5293C718.4813 504.468 626.9157 596.0299 513.9646 596.0299z" p-id="2379" fill="#666666"></path></svg>`);j.append(o).append(g).append(n).append(f);if(h.location||h.address){if(h.location){p=new BMap.Point(h.location[0],h.location[1]);m=h.location[0];l=h.location[1];g.val(m+","+l);if(!h.address){c(p,null,false)}else{o.val(h.address)}}else{o.val(h.address);var i=new BMap.Geocoder();i.getPoint(h.address,function(r){p=r;m=r.lng;l=r.lat;g.val(m+","+l)})}}else{var k=new BMap.Geolocation();k.getCurrentPosition(function(t){if(this.getStatus()==BMAP_STATUS_SUCCESS){var s=new BMap.Marker(t.point);p=t.point;m=t.point.lng;l=t.point.lat}},{enableHighAccuracy:true})}o.focus(function(r){n.show().css("zIndex",999);d()});o.blur(function(r){n.hide().css("zIndex",0)});function d(){if(a){return false}a=new BMap.Map("Map_"+b,{enableMapClick:false});a.centerAndZoom(new BMap.Point(m,l),15);a.enableScrollWheelZoom();a.enableContinuousZoom();e(p);a.addEventListener("click",function(s){e(s.point);c(s.point)});var r=o.val();q=new BMap.Autocomplete({input:"Map_input_"+b,location:a});q.setInputValue(r);q.addEventListener("onconfirm",function(v){var t=v.item.value;myValue=t.province+t.city+t.district+t.street+t.business;function s(){var w=u.getResults().getPoi(0).point;a.centerAndZoom(w,15);c(w,t);e(w)}var u=new BMap.LocalSearch(a,{onSearchComplete:s});u.search(myValue)})}function c(r,s,u){var t=new BMap.Geocoder();g.val(r.lng+","+r.lat);t.getLocation(r,function(v){var w=v.addressComponents;if(s){w=$.extend(s,w)}w.business=w.business?w.business:"";if(q){q.setInputValue(w.province+w.city+w.district+w.street+w.streetNumber+w.business)}else{t.getLocation(r,function(x){o.val(x.address)})}if(h.callback&&!u){h.callback(w,r)}})}function e(r){a.clearOverlays();var s=new BMap.Marker(r);a.addOverlay(s);s.enableDragging();s.addEventListener("dragend",function(t){c(t.point)})}};

相關文章