js百度地图(复制粘贴可以)

    <script src="/js/jquery-3.4.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:360px;width:100%;}
        #r-result{width:100%;}
    </style>

        <div class="layui-form-item">
                        <label class="layui-form-label">请输入地点</label>
                        <div class="layui-input-block">
                            <input id="suggestId"   placeholder="请输入 " autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="display: flex">
                        <div class="layui-form-item">
                            <label class="layui-form-label">经度</label>
                            <div class="layui-input-block">
                                <input id="lot" lay-verify="required" name="lot" readonly="readonly" placeholder="经度" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">纬度</label>
                            <div class="layui-input-block">
                                <input id="lat" lay-verify="required"  name="lat"  readonly="readonly" placeholder="纬度" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;z-index: 99999; display:none;"></div>
                    <div id="l-map" style="z-index: 0"></div>

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxxx"></script>
<script type="text/javascript">

    function G(id) {
        return document.getElementById(id);
    }
    var map = new BMapGL.Map("l-map");
    map.centerAndZoom("北京",12);
    map.enableScrollWheelZoom(true);
    map.addEventListener('click', function (e) {
        map.clearOverlays();
        var marker8 = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
        map.addOverlay(marker8);
        $("#lat").val(Math.floor((e.latlng.lat) * 1000000) / 1000000);
        $("#lot").val(Math.floor((e.latlng.lng) * 1000000) / 1000000);
    });
    var ac = new BMapGL.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;
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMapGL.Marker(pp));
            $("#lat").val(Math.floor((pp.lat) * 1000000) / 1000000);
            $("#lot").val(Math.floor((pp.lng) * 1000000) / 1000000);
        }
        var local = new BMapGL.LocalSearch(map, {
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>