获取地图的信息到input里

Posted 2020-12-31 yzx-fjl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取地图的信息到input里相关的知识，希望对你有一定的参考价值。

在最近项目中，我接触了百度地图的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)})}};

以上是关于获取地图的信息到input里的主要内容，如果未能解决你的问题，请参考以下文章

在 Android 片段中使用谷歌地图

我在网页上想调用百度地图，如何实现百度地图的标记功能，在html文件里写js代码

如何更改谷歌地图标记上方的标题和片段设计

谷歌地图在Android的标签片段上显示为灰色

如何在不在 android 的 Activity 上添加地图片段的情况下获取我的位置？

如何使用 TabLayout 在 ViewPager 中的 Google 地图片段中获取当前位置