百度地图点击获取定位信息以及定位的经纬度

1、导入地图的js连接

<script type="text/javascript" src="http://api./api?v=3.0&ak=qnwMAeEIwDh2LYxZSpdwgX"></script>

2、添加显示地图div（这是一个layui表单）

<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">输入地址或点击地图获取定位：</label><div class="layui-input-inline"><input type="text" name="keyword" autocomplete="off" placeholder="贵州省龙里县" class="layui-input"></div></div><div class="layui-inline"><a id="mapmoveBtn" class="layui-btn layui-btn-danger">获取坐标</a></div></div><div class="layui-form-item"><label class="layui-form-label">坐标经度<i class="color-red">&#10038</i></label><div class="layui-input-block"><input type="text" name="lon" lay-verify="required" disabled="disabled" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">坐标纬度<i class="color-red">&#10038</i></label><div class="layui-input-block"><input type="text" name="lat" lay-verify="required" disabled="disabled" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div id="map" class="panel panel-default" style="height: 350px; margin-top: 0px;"></div></div>

3、实现地图显示

// 百度地图API功能var map = new BMap.Map("map");map.centerAndZoom(new BMap.Point(106.991761,26.460632), 15);// 启用滚轮放大缩小map.enableScrollWheelZoom(true);// 向地图中添加缩放控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);// 向地图中添加比例尺控件var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});map.addControl(ctrlSca);function showInfo(e){// 点击获取定位信息$("input[name='lon']").val(e.point.lng);$("input[name='lat']").val(e.point.lat);map.clearOverlays();// 清空上一次的标注信息var new_point = new BMap.Point(e.point.lng,e.point.lat);var marker = new BMap.Marker(new_point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中map.panTo(new_point);}map.addEventListener("click", showInfo);var localSearch = new BMap.LocalSearch(map);localSearch.enableAutoViewport(); //允许自动调节窗体大小

根据地名获取坐标（按钮以及输入框在上面的）

/* 准备按钮事件 */function prepareBtn() {$("#mapmoveBtn").on("click", function () {var keyword = $("input[name='keyword']").val();if(keyword==''){return layer.msg("地址不能为空");}localSearch.setSearchCompleteCallback(function (searchResult) {var poi = searchResult.getPoi(0);//获取经度和纬度，将结果显示在文本框中$("input[name='lon']").val(poi.point.lng);$("input[name='lat']").val(poi.point.lat);map.clearOverlays();//清空原来的标注map.centerAndZoom(poi.point, 15);var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地址对应的经纬度map.addOverlay(marker);});localSearch.search(keyword);});}

效果如下