日期：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）放输入框和按钮（样式先不考虑）

<div id="allmap"></div>
<div id="boxInput"></div>

boxInput内放入控件

    <div id="boxInput">
        <label>地图中心经度：</label><input id="addLongitude" />
        <label>地图中心纬度：</label><input id="addLatitude" />
        <button id="btnShowMap" onclick="showMap()">确认</button>
    </div>

网页显示效果

3. JS库（jquery库）的引用和准备写JS代码

-jquery库可以下载到本地，也可以从服务器载入（网络不好的话，建议下载，具体步骤baidu）

<!--网络引用jquery库-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

在html中引用外部js文件（之前自己创建的），之后在这个.js文件中写JS代码

<script src="JavaScript.js"></script>

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引用百度地图的库

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

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 <strJson["DotNum"] ; 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 <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

结果展示图

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");
}

使用html+ashx+ajax实现asp.net前后端数据交互的实例