效果如下

image.png

代码

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">纬度</label>
            <div class="layui-input-inline">
                <input type="text" name="lat" id="bdlat" class="layui-input" value="{$info.lat}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">经度</label>
            <div class="layui-input-inline">
                <input type="text" name="lng" id="bdlng" class="layui-input" value="{$info.lng}">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">地图</label>
        <div class="layui-input-block">
            <input id="where" name="where" type="text" width="200px" ><input type="button" value="地图上找" class="layui-btn" onClick="searchbd()" /> <br /> 
            <div style="width:80%;height:340px;border:1px solid #ccc" id="container"></div>
        </div>
    </div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1121122"></script>
<script type="text/javascript">
    var lat = $('#bdlat').val();
    var lng = $('#bdlng').val();

    var map = new BMap.Map("container");//在指定的容器内创建地图实例 
    map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式 
    map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。 
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 13);

    map.addEventListener("click", function (e) {
        $('#bdlat').val(e.point.lat);
        $('#bdlng').val(e.point.lng);
        map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)));
        deletePoint();
    });

    if (lat < 10 && lng < 100) {
        toLocation();
    } else {
        map.addOverlay(new BMap.Marker(point));
    }

    // 定位
    function toLocation() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var myIcon = new BMap.Icon("/style/mobile/images/location/dd_01.png", new BMap.Size(30, 30));
                var marker = new BMap.Marker(r.point, {icon: myIcon});
                map.addOverlay(marker);
                map.panTo(r.point);
            }
        }, {enableHighAccuracy: true})
    }
  
    //地图搜索
    function searchbd() {
        var result = $('#where').val();
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map}
        });
        local.search(result);
    }

    //清除地图所有点
    function deletePoint() {
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length - 1; i++) {
            map.removeOverlay(allOverlay[i]);
        }
    }
</script>