fastadmin address插件增加省-市-区

addons/address/view/index/baidu.html

<script type="text/javascript">
    $(function () {
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }

        var map, marker, searchService, address = null, lng, lat, addressComponents=null;

        var init = function () {
            map = new BMap.Map("container"); // 创建地图实例
            var point = new BMap.Point({$lng}, {$lat}); // 创建点坐标
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.centerAndZoom(point, parseInt("{$config.zoom}")); // 初始化地图,设置中心点坐标和地图级别

            var size = new BMap.Size(10, 20);
            map.addControl(new BMap.CityListControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: size,
            }));

            var geoc = new BMap.Geocoder();

            var addpoint = function (point) {
                //通过点击百度地图,可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                var pt = point;
                geoc.getLocation(pt, function (rs) {
                    // 城市
                    addressComponents = rs.addressComponents;
                    //对象可以获取到详细的地址信息
                    address = rs.address;
                    deletePoint();
                    var mk = new BMap.Marker(pt);
                    map.addOverlay(mk);
                    map.panTo(pt);
                    var label = new BMap.Label('<div class="info">地址:' + address + '<br>经度:' + pt.lng + '<br>纬度:' + pt.lat + '</div>', {offset: new BMap.Size(16, 20)});
                    label.setStyle({
                        border: 'none',
                        padding: '.75rem 1.25rem'
                    });
                    mk.setLabel(label);
                    //将对应的HTML元素设置值
                    lng = pt.lng;
                    lat = pt.lat;
                });
            };

            if ("{$lng}" != '' && "{$lat}" != '') {
                addpoint(point);
            }

            ac = new BMap.Autocomplete({"input": "place", "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;
            });
            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 result = local.getResults().getPoi(0);
                    var pp = result.point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                    lng = pp.lng;
                    lat = pp.lat;
                    address = result.address;

                    var myGeo = new BMap.Geocoder();
                    myGeo.getLocation(new BMap.Point(lng, lat), function(result){
                        if (result && result.addressComponents){
                            addressComponents = result.addressComponents;
                        }
                    });
                }

                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }

            map.addEventListener("click", function (e) {
                //通过点击百度地图,可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                var pt = e.point;
                addpoint(e.point);
            });

            /**
             * 清除覆盖物
             */
            function deletePoint() {
                var allOverlay = map.getOverlays();
                for (var i = 0; i < allOverlay.length; i++) {
                    map.removeOverlay(allOverlay[i]);
                }
            }
        };

        var close = function (data) {
            var index = parent.Layer.getFrameIndex(window.name);
            var callback = parent.$("#layui-layer" + index).data("callback");
            //再执行关闭
            parent.Layer.close(index);
            //再调用回传函数
            if (typeof callback === 'function') {
                callback.call(undefined, data);
            }
        };

        //点击确定后执行回调赋值
        $(document).on('click', '.confirm', function () {
            var zoom = map.getZoom();
            var data = {lat: lat, lng: lng, zoom: zoom, address: address, addressComponents:addressComponents};
            close(data);
        });

        init();
    });
</script>

需要使用插件的js页面

bindevent: function () {
                $("[data-toggle='addresspicker']").data("callback", function(res){
                    //其中res则是包含了address/lat/lng等信息的JSON对象
                    var province = city = area = "";
                    if(res.addressComponents)
                    {
                        res.addressComponents.province && $("#c-province").val(res.addressComponents.province).trigger("change");
                        res.addressComponents.city && $("#c-city").val(res.addressComponents.city).trigger("change");
                        res.addressComponents.district && $("#c-area").val(res.addressComponents.district).trigger("change");
                    }
                });
                Form.api.bindevent($("form[role=form]"));
            }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值