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

前端实现:
//通过地址搜索定位
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
1242

被折叠的 条评论
为什么被折叠?



