日期：2020-07-24
实例：输入经纬度，调用百度地图api显示，并随机生成折线显示图中
目录
准备工作
前端框架实现
JS库(jquery库)的引用和准备写JS代码
实现用后端交互的框架(ajax)
后端读取数据
处理数据(利用给定的经纬度随机生成几个点)
如何存储发送给前端的数据(转JSON格式，利用Json.net)
显示地图(百度地图api)
美化网页
1. 准备工作
工具visual studio2019，安装组件
组件
新建项目-asp.net Web 应用程序
项目名
添加新项-(html、javascript、一般处理程序)
2.前端框架实现
需要一个盒子(div#allmap)放地图，一个盒子(div#boxInput)放输入框和按钮(样式先不考虑)
boxInput内放入控件
地图中心经度：
地图中心纬度：
确认
网页显示效果
3. JS库(jquery库)的引用和准备写JS代码
-jquery库可以下载到本地，也可以从服务器载入(网络不好的话，建议下载，具体步骤baidu)
在html中引用外部js文件(之前自己创建的)，之后在这个.js文件中写JS代码
4. 实现用后端交互的框架(ajax)
介绍：AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
在我们的 W3C官网中了解更多有关 AJAX 的知识。
Query 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
将.ajax写入到“确定”按钮对应的onclick事件所调用的函数showMap()内
function showMap() {
$.ajax({
type: "post",
url: "Insert.ashx",
//.ashx后端文件(名字不能错)
dataType: 'json',
// 传输回来的数据格式为JSON格式
data: {
"longitude": strLo,
"latitude": strLa
},
// data是传输过去的数据格式(JSON)
success: function (data, textStatus) {
// 连接成功调用此函数，data为后端传的数据，
// textS。。是状态码“success”
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 连接失败调用此函数
}
});
}
在success和error中写alert测试一下----发现OK
准备测试
在测试之前注意：
dataType先屏蔽掉，因为ashx里的默认返回一个“helloword”，不是json格式-error
data：里先不传数据(里面的数据我还没定义)就直接data:{}, 、
网页F12调试页面
5. 后端读取数据
.ashx.cs文件
其中我们可以从context中获得前端传的数据，通过context.Request[key]得到value
data: {
"longitude": strLo,
"latitude": strLa
},
//----------------------------------
string Lo= context.Request["longitude"];
// Lo里面是strLo
假设后端收到经度和纬度这两个数据，我们写一个处理函数AnalyseData()来生成一个返回给前端的数据
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string strLo = context.Request["longitude"];
string strLa = context.Request["latitude"];
double longitude = Double.Parse(strLo);
double latitude = Double.Parse(strLa);
// 前端数据读取，并使用Double.Parse()将字符串转成double
context.Response.Write(AnalyseData(longitude, latitude));
}
public string AnalyseData(double lo, double la)// lo经度，la维度
{
return "dataReturn";
}
6. 处理数据(利用给定的经纬度随机生成几个点)
AnalyseData()收到经纬度信息后，利用其随机生成四个点,坐标为(经度+/-0.01,纬度+/-0.01)
随机数生成(用的网上的代码)
static int GetRandomSeed()//获取随机种子，不然多个随机数的生成会一毛一样
{
byte[] bytes = new byte[4];
System.Security.Cryptography.RNGCryptoServiceProvider rng = new System.Security.Cryptography.RNGCryptoServiceProvider();
rng.GetBytes(bytes);
return BitConverter.ToInt32(bytes, 0);
}
public double GetRandomNumber(double minimum, double maximum, int Len = 3) //Len小数点保留位数
{//在最大值和最小值之间生成，有效数字三位
Random random = new Random(GetRandomSeed());
return Math.Round(random.NextDouble() * (maximum - minimum) + minimum, Len);
}
使用for循环生成四个点
for (int i = 0; i < num; i++)
{
GetRandomNumber(lo-0.01, lo+0.01);
GetRandomNumber(la - 0.01, la + 0.01);
}
7. 如何存储发送给前端的数据(转JSON格式，利用Json.net)
Json格式自己写的话，比较麻烦，建议使用Json.net库
包的寻找如下图
引用库,之后就可以把类(MapDots)转成Json格式的string
using Newtonsoft.Json;
public class A
{
public int Num { get; set; }
public double[] Nums { get; set; }
}
string jsonA = JsonConvert.SerializeObject(A);
定义点类MapDots
public class MapDots
{
public int DotNum { get; set; }
public double[] DotsLo { get; set; }
public double[] DotsLa { get; set; }
}
读入数据&转换格式
public string AnalyseData(double lo, double la)// lo经度，la维度
{
MapDots mapDots = new MapDots();
mapDots.DotNum = 4; // 生成的随机点数量
int num = mapDots.DotNum;
mapDots.DotsLo = new double[num];
mapDots.DotsLa = new double[num];
//实例化类，并初始化
for (int i = 0; i < num; i++)
{
double ilo = GetRandomNumber(lo-0.01, lo+0.01);
double ila = GetRandomNumber(la - 0.01, la + 0.01);
// 随机生成点
mapDots.DotsLo[i] = ilo;
mapDots.DotsLa[i] = ila;
//把这个点的经度和维度读入到类中
}
string result = JsonConvert.SerializeObject(mapDots);
return result;
}
8. 显示地图(利用百度地图api)
8.1引用百度地图的库
8.2绘图准备：读取输入框的数据并转成num&后端传来的数据处理
jquery库的方便使用，$("#所找的元素的ID");
val()方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于input元素。
var strLo = $("#addLongitude").val();
var strLa = $("#addLatitude").val();
//
var longitude = Number(strLo);
var latitude = Number(strLa)
//转成num类型
后端数据处理写在一个函数addPolyline(strJson)中，之后在其中绘制折线
//假设返回data，可以使用 data["ashx对应的类属性名"]得到对应属性值
function addPolyline(strJson) {
for (var i = 0; i
points[i] = new BMapGL.Point(strJson["DotsLo"][i], strJson["DotsLa"][i]);
}
}
// 使用 BMapGL.Points(经度，纬度)生成百度地图能用的坐标点格式
8.3 绘图
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(longitude, latitude);
map.centerAndZoom(point, 15);
//画地图(在id为allmap的元素中)
for (var i = 0; i
points[i] = new BMapGL.Point(strJson["DotsLo"][i], strJson["DotsLa"][i]);
}
var polyline = new BMapGL.Polyline(points,
{ strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }
); // 折线定义
map.addOverlay(polyline); // 百度地图画折线API
结果展示图
js代码如下
function drawMap(longitude, latitude) {// 在里面能调用？
map = new BMapGL.Map("allmap");// 全局变量
var point = new BMapGL.Point(longitude, latitude);
map.centerAndZoom(point, 15);
}
function addPolyline(strJson) {
var points = new Array(); //储存坐标点的数组
for (var i = 0; i < strJson["DotNum"]; i++) {
points[i] = new BMapGL.Point(strJson["DotsLo"][i], strJson["DotsLa"][i]);
}
var polyline = new BMapGL.Polyline(points,
{ strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }
); // 折线定义
map.addOverlay(polyline); // 百度地图画折线API
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
map.addOverlay(marker); //增加一个点
}
function showMap() {
alert("1");
var strLo = $("#addLongitude").val();
var strLa = $("#addLatitude").val();
var lo = Number(strLo);
var la = Number(strLa);
drawMap(lo, la);
$.ajax({
type: "post",
url: "Handler1.ashx",
//.ashx后端文件
dataType: 'json',
// 传输回来的数据格式为JSON格式
data: {
"longitude": strLo,
"latitude": strLa
},
// data是传输过去的数据格式(JSON)
success: function (data, textStatus) {
// 连接成功调用此函数，data为后端传的数据，
// textS。是状态码“success”
addPolyline(data);
alert("num:" + data["DotNum"]);
//alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 连接失败调用此函数
alert("error");
}
});
//alert("222");
}
扫一扫
2354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
