html

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=v3Cg0hRvbX7cuUSKG2sEklyeP8iw5eye"></script>
<style>
#container {
width: 100%;
height: 500px;
overflow: hidden;
}
</style>


<form class="layui-form">
经度
<input type="text" id="Lng" name="Lng" lay-verify="required" autocomplete="off" class="layui-input" value="123" disabled>

<br/>
<br/>
<br/>
<br/>
<br/>

纬度
<input type="text" id="Lat" name="Lat" lay-verify="required" autocomplete="off" class="layui-input" value="321" disabled>

<br/>
<br/>

<div id='container'></div>
</form>

JS

<script>
//默认数据
var _lng = '113.6943994066437';
var _lat = '34.7881293404302';
var _Address = '河南省郑州市';

//初始化数据
var lng = document.getElementById("Lng");
var lat = document.getElementById("Lat");
var Address = '河南省郑州市金水区丰产路路街道政七街社区十三号院河南省青少年科技中心';

//构建地图
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(_lng, _lat), 18);
map.addOverlay(new BMapGL.Marker(new BMapGL.Point(_lng, _lat), { title: Address }));
map.enableScrollWheelZoom(true); //启用滚轮放大缩小。
map.enableInertialDragging(true);//启用地图惯性拖拽,默认禁用。
map.enableContinuousZoom(true); //启用连续缩放效果,默认禁用。


//创建地址解析器实例
var myGeo = new BMapGL.Geocoder();

// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(Address, function (point) {
//console.log(point);
if (point) {
lng.value = point.lng;
lat.value = point.lat;
map.centerAndZoom(point, 18);
map.addOverlay(new BMapGL.Marker(point, { title: Address }))
} else {
alert('您选择的地址没有解析到结果!');
}
}, _Address)

//地图点击事件
map.addEventListener("click", function (e) {
//console.log(e);
lng.value = e.latlng.lng;
lat.value = e.latlng.lat;
map.clearOverlays()
map.addOverlay(new BMapGL.Marker(e.latlng, { title: Address }));
});
</script>