获取地图的信息到input里

作者: 亖呉?盀
来源: 51数据库
2021-07-08

在最近项目中，我接触了百度地图的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://www.51sjk.com/Upload/Articles/1/0/267/267306_20210708015605768.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.51sjk.com/Upload/Articles/1/0/267/267306_20210708015605783.jpg" p-id="2378" xmlns:xlink="http://www.51sjk.com/Upload/Articles/1/0/267/267306_2021070801560578301.jpg" 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)})}};