Openlayer实现地址模糊搜索定位----基于Vue+Element-UI

需求:需要实现通过地址模糊定位位置

主界面:

前端实现:

        

//通过地址搜索定位

        SearchLocation: function () {

            //判断地址栏输入是否为空

            if (this.address.trim() === "") {

                //提示用户(ELement ui)

                this.$notify({

                    title: "警告",

                    message: "地址输入不能为空!",

                    type: "warning",

                });

                return;

            }

            //向后端传递的对象

            let ads = { address: $输入框内的内容$};



            //发送请求获取经纬度(这个是我自己写的后台,后台代码会附在后面)

            this.$axios

                //通过地址获取其经纬度

                .post(process.env.API_HOST + "Common/GetXY", ads)

                .then((res) => {

                    let data=res.data;

                    //判断是否执行成功(Element ui)

                    if (data.res.suc === false) {

                        //提示查询消息

                        this.$notify.info({

                            title: "消息",

                            message: data.res.ResultMsg,

                        });



                        return;

                    }

                    //缩放至XY

                    this.ZoomTo(data.xy.X,data.xy.Y);

                });

        },

        /**

         * 缩放到指定位置

         * x :x坐标

         * y:y坐标

         */

        ZoomTo: function (x, y) {



            let location = [x, y];



            let view = this.map.getView();

            var zoom = view.getZoom();

            // 设置地图等级

            view.setZoom(15);



            //缩放至指定点

            view.animate({

                center: location,

                //动画持续的时间(毫秒)

                duration: 0,

            });

        }

后台实现:

自建对象: 

VmMessageResult:用户接口调用返回,判断是否成功

/// <summary>
    /// 
    /// </summary>
    public class VmMessageResult
    {
        /// <summary>
        /// 是否成功
        /// </summary>
        public bool suc { get; set; }

        /// <summary>
        /// 结果消息
        /// </summary>
        public string ResultMsg { get; set; }
    }

XY:用于保存获取的经纬度

  public class XY
    {
        /// <summary>
        /// 经度
        /// </summary>
        public double X;

        /// <summary>
        /// 纬度
        /// </summary>
        public double Y;
    }

VmXYResult:用于接口返回数据

    public class VmXYResult
    {
        /// <summary>
        /// 结果状态
        /// </summary>
        public VmMessageResult res;

        /// <summary>
        /// 经纬度
        /// </summary>
        public XY xy;
    }

GetXY(string address):通过百度api获取逆编码,,,key需要自己去申请百度api的key

 /// <summary>
        /// 获取经纬度
        /// </summary>
        /// <param name="address"></param>
        /// <returns></returns>
        public static double[] GetXY(string address)
        {
            try
            {
                /// <summary>
                /// 
                /// </summary>
                string url = String.Format("http://api.map.baidu.com/geocoding/v3/?address={0}&output=json&ak={1}", address, key);

                HttpClient client = new HttpClient();

                string result = client.GetStringAsync(url).Result;

                var locationResult = (JObject)JsonConvert.DeserializeObject(result);

                string lngStr=locationResult["result"]["location"]["lng"].ToString();

                string latStr = locationResult["result"]["location"]["lat"].ToString();

                double lng = double.Parse(lngStr);

                double lat = double.Parse(latStr);

                return new double[] { lng, lat };
            }
            catch (Exception ex)
            {

                return null;
            }
           
        }

接口代码:

 /// <summary>
        /// 通过地址获取经纬度
        /// </summary>
        /// <param name="obj"></param>
        /// <returns></returns>
         [HttpPost]
        public VmXYResult GetXY(JObject obj)
        {
            try
            {
                //地址
                string address = obj["address"].ToString();

                double[] xy = UsualMethod.GetXY(address);

                if (xy == null)
                {
                    return new VmXYResult()
                    {
                        res=new VmMessageResult() {
                            suc=false,
                            ResultMsg="查询结果为空!"
                        },
                        xy=new XY() {
                            Y=0,
                            X=0
                        }
                    };
                }
                else
                {
                    return new VmXYResult()
                    {
                        res = new VmMessageResult()
                        {
                            suc = true,
                            ResultMsg = "查询成功!"
                        },
                        xy = new XY()
                        {
                            Y = xy[1],
                            X = xy[0]
                        }
                    };
                }
            }
            catch (Exception ex)
            {
                return new VmXYResult()
                {
                    res = new VmMessageResult()
                    {
                        suc = false,
                        ResultMsg = ex.Message
                    },
                    xy = new XY()
                    {
                        Y = 0,
                        X = 0
                    }
                };
            }


        }

测试(输入西安,大致定位到西安去):

就此,这样就实现了通过地址模糊定位。

前提:需要联网才可以,不然调用不了百度的api,显然也获取不到XY坐标数据。

QQ群(GIS开发交流、数据共享、软件使用):993836992

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值