HTML百度地图拖动选点,获取详情地址,回填输入框.

一.样板图

二.HTML代码

//样式
<style type="text/css">
    body, html, #allmap {
   
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }

    .button-full {
   
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        height: 50px;
        width: 100%;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #333;
        text-decoration: none;
    }
</style>
//经度纬度赋值用的input
 <input type="hidden" name="lweidu" id="lweidu" runat="server"/>
 <input type="hidden" name="ljingdu" id="ljingdu" runat="server"/>
	//这里我用的layui的输入框,也可以使用你自己的
     <div class="layui-inline layui-col-md12">
          <label class="layui-form-label">地址<span style="color: red;">*</span></label>
          <div class="layui-input-block">
          <input name="city" placeholder="地址" id="xianshi" type="text"
                                   class="layui-input"
                                   lay-verify="required" required/>
          </div>
     </div>
     //这里是地图展示和隐藏的div
    <div style="width: 100%;position:absolute;top:0;left:0%;height:100%;z-index:9999;opacity:1;top:0%;display:none"
        <div id="allmap"></div>
        <a id="chosedBtn" class=" button-full">选择这个地址</a>
    </<