经纬度选择弹窗插件(layui)

2021-10-11

字数： 1.2k字 | 阅读时长： 6min | 阅读量：次

前提：本组件是根据项目进行开发，所以在技术选择上有相对固定的选择，当然大体使用都差不多。

需求

能够在地图上标记或者输入地址名搜索来获取经纬度

技术

百度地图API 、 JQuery 、 Mustache 、Layui

方案

利用 layer 的弹窗，加入百度地图
根据百度地图API的经纬度获取，放入输入框
将选择的经纬度值放入绑定的组件上
绑定点击其他地方隐藏插件

代码如下：

/**需要引入百度地图
 * <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LYD2WWEcZqKHTnEuwCpSFzz0e0ghi8qR"></script>
 */
var Location = function () {
}

Location.prototype = {
    MAP: -1,
    layerIndex: -1,
    renderHTML: function (el) {
        if ($('.my-location-layer').length === 0) {
            var tmp = '<div class="my-location-layer" style="display: none;height: 100%;width: 100%;">' +
                '<div style="position: absolute;top: 20px;left: 20px;z-index: 1;">' +
                '<input type="text" placeholder="请输入名称" class="my-location-address layui-input" style="padding-right: 30px;"' +
                'name="my-location-address">' +
                '<i type="button" class="my-location-btn layui-icon layui-icon-search" style="position: absolute;top: 10px; right: 10px;"></i>' +
                '</div>' +
                '<div id="my-location-map" style="height: 100%;width: 100%;"></div>' +
                '</div>';
            var div = document.createElement('div')
            div.className = 'my-location'
            div.innerHTML = tmp
            document.body.appendChild(div)
            $('.my-location').click(function (e) {
                return false
            })
            $(document).click(function (e) {
                if (e.target.tagName === 'BODY' && $('.my-location .layui-layer').data('move') === 'yes') {
                    $('.my-location .layui-layer').attr('data-move', 'no')
                } else {
                    layer.close(_this.layerIndex)
                    $('.my-location').hide()
                    $('input[name=my-location-address]').val('')
                    if (_this.MAP) {
                        _this.MAP.clearOverlays();
                    }
                }
            })
        }
        var _this = this
        layui.use('layer', function () {
            el.click(function (e) {
                _this.layerIndex = layer.open({
                    type: 1,
                    title: '定位',
                    area: ['400px', '300px'],
                    shade: 0,
                    offset: 'rb',
                    resize: false,
                    content: $('.my-location-layer'),
                    success: function (layero, index) {
                        _this.initLocationLayer(el)
                    },
                    cancel: function () {
                        layer.close(_this.layerIndex)
                        $('.my-location').hide()
                        $('input[name=my-location-address]').val('')
                        _this.MAP.clearOverlays();
                    },
                    moveEnd: function (layero) {
                        $('.my-location .layui-layer').attr('data-move', 'yes')
                    }
                });
                $('.my-location').show()
                return false
            })
        })
    },
    initLocationLayer: function (el) {
        var _this = this
        $('.my-location-layer').show()
        _this.MAP = new BMap.Map("my-location-map");
        _this.MAP.centerAndZoom("江苏", 9);
        _this.MAP.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用
        _this.MAP.enableKeyboard(true); //启用键盘操作，默认禁用。
        _this.MAP.enableDragging(); //启用地图拖拽，默认启用
        _this.MAP.enableDoubleClickZoom(); //启用双击放大，默认启用
        _this.MAP.addEventListener("click", function (e) {
            _this.setMarker({ lng: e.point.lng, lat: e.point.lat })
            el.val(e.point.lng + ',' + e.point.lat)
        });
        // 按钮事件(自己定义)
        $(".my-location-btn").click(function () {
            _this.setPlace($('input[name=my-location-address]').val(), el);
        });
        $('input[name=my-location-address]').keypress(function (e) {
            if (e.keyCode === 13) {
                _this.setPlace($('input[name=my-location-address]').val(), el);
            }
        });
        var value = el.val()
        if (value.split(',').length === 2) {
            _this.setMarker({
                lng: value.split(',')[0],
                lat: value.split(',')[1]
            })
        }
        el.keypress(function (e) {
            var value = el.val()
            if (value.split(',').length === 2) {
                _this.setMarker({
                    lng: value.split(',')[0],
                    lat: value.split(',')[1]
                })
            }
        })
    },
    setPlace: function (value, el) {
        var _this = this
        var local, point, marker = null;
        local = new BMap.LocalSearch(_this.MAP, { //智能搜索
            onSearchComplete: fn
        });

        local.search(value);

        function fn() {
            //如果搜索的有结果
            if (local.getResults() != undefined) {
                _this.MAP.clearOverlays(); //清除地图上所有覆盖物
                if (local.getResults().getPoi(0)) {
                    point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                    _this.MAP.centerAndZoom(point, 18);
                    marker = new BMap.Marker(point); // 创建标注
                    _this.MAP.addOverlay(marker); // 将标注添加到地图中
                    marker.enableDragging(); // 可拖拽
                    // alert("当前定位经度:"+point.lng+"纬度:"+point.lat);
                    el.val(point.lng + ',' + point.lat)
                } else {
                    alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
                }
            } else {
                alert("未找到搜索结果")
            }
        }
    },
    setMarker: function (point) {
        var _this = this
        _this.MAP.clearOverlays();
        // alert(e.point.lng + "," + e.point.lat);
        point = new BMap.Point(point.lng, point.lat);
        _this.MAP.centerAndZoom(point, 9);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            // {streetNumber: "", street: "", district: "沙坪坝区", city: "重庆市", province: "重庆市"}
            var address = addComp.province + addComp.city + addComp
                .district + addComp.street +
                addComp.streetNumber
            $('input[name=my-location-address]').val(address)
        });
        var marker = new BMap.Marker(point);
        _this.MAP.addOverlay(marker);
        // document.getElementById("map").value = e.point.lng + "," + e.point.lat;
    }
}

使用示例：

<input id="input" class="input form-control"
    type="text" value="118.74561,32.17553"
    οnfοcus="if (value =='118.74561,32.17553'){value =''}"
    οnblur="if (value ==''){value='118.74561,32.17553'}">
<script>
    // 绑定经纬度输入框
    var location = new Location();
    location.renderHTML($('#input'));
</script>

本文作者： jeneen
发布时间： 2021-10-11
最后更新： 2023-05-09
本文标题： 经纬度选择弹窗插件(layui)
本文链接： https://zx1001011.github.io/2021/10/11/pluginofLocation/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！