基于ASP.NET，AJAX，Sqlserver和百度地图API开发的西南科技大学校园地图

最新推荐文章于 2022-06-08 14:42:03 发布

疆~

最新推荐文章于 2022-06-08 14:42:03 发布

阅读量1.3k

点赞数 5

文章标签： ASP.NET AJAX Sqlserver 百度地图API

本文链接：https://blog.csdn.net/qq_40323256/article/details/85643891

版权

ASP.NET网站开发专栏收录该内容

6 篇文章 7 订阅

订阅专栏

isUserNameExist.aspx.cs:

项目源码：https://download.csdn.net/download/qq_40323256/10889242

项目内容：

1.利用ASP.NET实现用户的登录与注册，并将用户的用户名及密码用Sqlserver数据库存储起来。

2.此校园地图可以实现根据输入地图名查询地图，输入框输入关键字可以自动联想相关地址，鼠标滚轮或者右键地图视图实现地图的缩放，普通影像与卫星影像的互换，对工具条或比例尺的添加或删除，打开全景图等功能。

注意事项：

在项目的开发之前，需要在百度地图开放者平台申请密匙，此密匙是百度地图为用户免费提供的，人人都可以申请。具体申请方法见：https://jingyan.baidu.com/article/e73e26c0b5b75124adb6a786.html

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="西南科技大学校园地图.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录账号</title>
    <style type="text/css">
        a {
            text-decoration :none;
        }
        .login{
            margin-left :500px;
        }
        .head{
               text-align :center ;
               font-size :x-large ;
               color :blue   ;
           }
    </style>
</head>
<body>
    <form id="form1" runat="server">
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <div class ="head ">
            欢迎登录西南科技大学校园地图<br /><br />
        </div>
            <table class ="login " >
                 <tr>
                     <td>
                        用户名： <asp:TextBox ID="txt_UserName" runat="server" Text="请输入用户名" 
                onfocus="javascript:if(this.value=='请输入用户名'){this.value=''}" 
                  ></asp:TextBox>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                  ControlToValidate="txt_UserName" ErrorMessage ="*  用户名不能为空" ForeColor ="Red">
           </asp:RequiredFieldValidator>

                    </td>
                </tr>
                
                <tr>
                     <td>
                        密码：&nbsp;&nbsp;&nbsp <asp:TextBox ID="txt_Password" runat="server" Text="请输入密码" 
                onfocus="javascript:if(this.value=='请输入密码'){this.value=''}" 
                  ></asp:TextBox>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                  ControlToValidate="txt_Password" ErrorMessage ="*  密码不能为空" ForeColor ="Red">
           </asp:RequiredFieldValidator>

                    </td>
                </tr>
                
                <tr>
                    <td>
                                            <asp:Button ID="btn_Login_Visitor" runat="server" Text="游客登录" OnClick="btn_Login_Visitor_Click" Width="84px" />
        &nbsp;&nbsp; &nbsp;<asp:Button ID="btn_Login" runat="server" Text="登录" OnClick="btn_Login_Click" Width="82px" />
       
            <asp:LinkButton ID="LinkButton_register" runat="server" OnClick="LinkButton1_Click">没有账号？注册</asp:LinkButton>
                    </td>
                </tr>
          </table>   
       
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 西南科技大学校园地图
{
    public partial class Login : System.Web.UI.Page
    {
       
        private string myConnStr = ConfigurationManager.ConnectionStrings["SQL"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {
            Session["a"] = "游客";
            Session["username"] = txt_UserName.Text;
            Session["password"] = txt_Password.Text;
        }

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Response.Redirect("Register.aspx");
        }

        protected void btn_Login_Click(object sender, EventArgs e)
        {
            string username = txt_UserName.Text;
            string password = txt_Password.Text;
            if (Page.IsValid == true)
            {
                
                Session["a"] = username;
                string sql = "select * from Users where UserName=@UserName and Password=@Password";
                SqlParameter[] parameters = { new SqlParameter("@UserName", username), new SqlParameter("@Password", password) };
                using (SqlConnection conn = new SqlConnection(myConnStr ))
                {
                    conn.Open();
                    using (SqlCommand cmd = conn.CreateCommand())
                    {
                        cmd.CommandText = sql;
                        cmd.Parameters.AddRange(parameters);
                        DataSet ds = new DataSet();
                        SqlDataAdapter adapter = new SqlDataAdapter(cmd);
                        adapter.Fill(ds);
                        DataTable table = ds.Tables[0];
                        if (table != null)
                        {
                            Response.Redirect("Map.aspx");
                        }
                        else
                        {
                            Response.Write(@"<script>alert('登录失败！');</script>");
                        }
                           

                    }
                }

            }
     
        }

        protected void btn_Login_Visitor_Click(object sender, EventArgs e)
        {
            Response.Redirect("Map.aspx");
        }
    }
}

Register.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="西南科技大学校园地图.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册账号</title>
       <style type ="text/css" >
           a{
               text-decoration :none ;
           }
           .Register{
              margin-left :500px;
           }
           .head{
               text-align :center ;
               font-size :x-large ;
               color :blue   ;
           }
       </style>
</head>
<body>
    <form id="form1" runat="server">
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <div class ="head ">
            欢迎注册西南科技大学校园地图<br /><br />
        </div>
        <table class ="Register " >
                 <tr>
            
                     <td >
                         用户名：&nbsp;&nbsp;&nbsp;&nbsp<asp:TextBox ID="txt_UserName" runat="server" Text="" 
                  onblur="Valide_UserName(this.value)"></asp:TextBox>
                     </td>
                     <td>
                      <div id="result_UserName"></div>
                    </td>
                </tr>
                <tr>
                          <td>
                         密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txt_Password" runat="server" Text="" 
               
                  ></asp:TextBox>
                    </td>
                </tr>
                      <tr>
                          
                           
                                     <td>
                         确认密码：<asp:TextBox ID="txt_rePassword" runat="server" Text="" 
               
                 onblur=""></asp:TextBox>
                    </td>
                          <td>
                              <asp:Label ID="label_IsPasswordEqual" runat="server" Text="" ForeColor ="Red" ></asp:Label>
                          </td>
                </tr>
            <tr>
                <td>
                    <asp:Button ID="btn_Login" runat="server" Text="注册" Width ="150px" OnClick="btn_Login_Click" />
                    &nbsp;&nbsp;&nbsp;
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick ="LinkButton1_Click">已有账号？登录</asp:LinkButton>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<script type ="text/javascript" >

            var xmlHttp;
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            function Valide_UserName(str) 
            {

                    var name = document.getElementById("txt_UserName");
                    xmlHttp.open("Get", "isUserNameExist.aspx?name=" + str,true );
                    xmlHttp.onreadystatechange= onmessageBack;
                    xmlHttp.send(null);

                    function onmessageBack()
                    {
                        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                        {
                        document.getElementById("result_UserName").innerHTML = xmlHttp.responseText;
                        }
                    }
            }


</script>

Register.aspx.cs:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 西南科技大学校园地图
{
    public partial class Register : System.Web.UI.Page
    {
        private string myConnStr = ConfigurationManager.ConnectionStrings["SQL"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Response.Redirect("Login.aspx");
        }

        protected void btn_Login_Click(object sender, EventArgs e)
        {
            string username = txt_UserName.Text.ToString();
            string password = txt_Password.Text.ToString();
            string repassword = txt_rePassword.Text.ToString();
            

            if(username == "")
            {
                Response.Write("<script>alert('用户名不能为空');</script>");
                txt_UserName.Text  = "";
            }
            if(!(password ==repassword ))
            {
                Response.Write("<script>alert('两次输入密码不一致，请重新输入！');</script>");
                txt_Password.Text = "";
                txt_rePassword.Text = "";

            }
            if(!(username == "")&(password ==repassword))
            {
                
              string sql = "Insert into Users(UserName, Password) values(@UserName,@Password)";
                SqlParameter[] parameters = { new SqlParameter("@UserName", username), new SqlParameter("@Password", password) };
                using (SqlConnection conn = new SqlConnection(myConnStr ))
                {
                    conn.Open();
                    using (SqlCommand cmd = conn.CreateCommand())
                    {
                        cmd.CommandText = sql;
                        cmd.Parameters.AddRange(parameters);
                        cmd.ExecuteNonQuery();
                    }
                }

                Response.Write(@"<script>alert('注册成功！');</script>");
            }
        }
    }
}

isUserNameExist.aspx.cs:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 西南科技大学校园地图
{
    public partial class isUserNameExist : System.Web.UI.Page
    {
        private string myConnStr = ConfigurationManager.ConnectionStrings["SQL"].ConnectionString;

        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Expires = -1;
            string name = this.Request.QueryString["name"];

            string mydr;
            SqlConnection myConn = new SqlConnection(myConnStr);
            string sql = "SELECT UserName from Users WHERE UserName=";
            sql = sql + "'" + name + "'";
            SqlCommand sqlCommand = new SqlCommand(sql, myConn);
            try
            {
                myConn.Open();
                if (name != "")
                {
                    if (sqlCommand.ExecuteScalar() != null)
                    {
                        mydr = sqlCommand.ExecuteScalar().ToString();
                        Response.Write("* 该用户名-"+name +"-已存在,请重新输入");
                        
                        Response.End();
                    }
                    else
                    {
                        Response.Write("√");
                        Response.End();
                    }
                }
                else
                {
                    Response.Write("请输入用户名！");
                    Response.End();
                }
            }
            catch (SqlException se)
            {

                Response.Write(se.Message + "<br>");
                Response.End();
            }
            finally
            {
                myConn.Close();
            }
        }
    }
}

Map.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map.aspx.cs" Inherits="西南科技大学校园地图.Map" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx自己申请"></script>
    <title>西南科技大学校园地图</title>
    <style type="text/css">
        #allmap {
            width: 1139px;
            height: 600px;
            overflow: hidden;
            font-family: "微软雅黑";
            float: left;
            margin: 0;
        }

        .font {
            font-size: large;
            color: blue;
            font-style: italic;
        }

        .top_left{
            height: 50px;
            width: 75%;
            color: #0066FF;
            background-color: #FFFFCC;
            font-size: xx-large;
            font-weight: bolder;
            font-style: normal;
            text-align: center;
            float :left ;
        }
        .top_middle{
            height: 50px;
            width: 5.5%;
            color: #0066FF;
            background-color: #FFFFCC;
            font-size: large;
            font-style :italic ;
            
            text-align: center;
            float :left ;
        }
         .top_right{
            height: 50px;
            width:14%;
            color:aliceblue ;
            background-color:coral ;
            
            font-weight: bolder;
            font-style: normal;
            text-align: center;
            float :left ;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .m_l {
            width: 25%;
            height: 600px;
            background-color: papayawhip;
            float: left;
        }

        .m_r {
            width: 75%;
            height: 600px;
            background-color: white;
            float: left;
        }

        .foot {
            height: 110px;
            width: 100%;
            background-color: deepskyblue;
            float: left;
            clear: left;
            color: black;
            font-size: larger;
            text-align: center;
        }
    </style>
</head>
<body>
     <form id="form1" runat="server">
          <div class="top_left ">
        西南科技大学校园地图
    </div>
 <div class ="top_middle ">
  <asp:Label ID="Label_Hello" runat="server" Text="你好！" Font-Size="Large"  Width ="100%" Height ="100%" BackColor ="#FFFFCC" ForeColor="black"></asp:Label>
     
 </div>
          <div class ="top_middle " >
  <asp:Label ID="Label_UserName" runat="server" Text="游客" Font-Size="Large"  Width ="100%" Height ="100%" BackColor ="#FFFFCC" ForeColor="black"></asp:Label>
     
 </div>
         <div class ="top_right ">
             <asp:Button ID="btn_Exit" runat="server" Text="退出登录" Width ="100%" Height ="100%" BackColor ="#ff3300" ForeColor="White" Font-Size="Large" OnClick ="btn_Exit_Click"/>
         </div>
            
    <div class="m_l font  ">
        &nbsp;&nbsp;  <input id="btn_AddControl" type="button" value="添加工具条/比例尺" onclick="add_control()" />
        &nbsp; &nbsp; <input id="btn_DelControl" type="button" value="删除工具条/比例尺" onclick="delete_control()" /><br /><br />

        
	 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>请输入:<input type="text" id="suggestId" size="20" value="西南科技大学" style="width:150px;" /></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    </div>




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

    <div class="foot">
        WebGIS课程实验设计
    </div>
 </form>
   
</body>
</html>
<script type="text/javascript">


    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(104.701, 31.539), 17);
    //显示地图
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    map.setCurrentCity("西南科技大学");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放



    //添加控件
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }); //右上角，仅包含平移和缩放按钮
    //添加控件和比例尺
    function add_control()
    {
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);
    }
    //移除控件和比例尺
    function delete_control()
    {
        map.removeControl(top_left_control);
        map.removeControl(top_left_navigation);
        map.removeControl(top_right_navigation);
    }


    //全景地图
    map.enableScrollWheelZoom(true);
    // 覆盖区域图层测试
    map.addTileLayer(new BMap.PanoramaCoverageLayer());

    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    stCtrl.setOffset(new BMap.Size(100, 10));
    map.addControl(stCtrl);//添加全景控件

    
    
    //鼠标右键放大缩小
    var menu = new BMap.ContextMenu();
    var txtMenuItem = [
        {
            text: '放大',
            callback: function () { map.zoomIn() }
        },
        {
            text: '缩小',
            callback: function () { map.zoomOut() }
        }
    ];
    for (var i = 0; i < txtMenuItem.length; i++)
    {
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);


    //关键字提示输入
    	function G(id) {
		return document.getElementById(id);
	}

    	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"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;
	});

	var myValue;
	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 pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}

</script>

Map.aspx.cs:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 西南科技大学校园地图
{
    public partial class Map : System.Web.UI.Page
    {
      
        protected void Page_Load(object sender, EventArgs e)
        {

            if(Session["a"].ToString () == "游客")
            {
                Label_UserName.Text = "游客";
            }else
            {
                Label_UserName.Text = Session["a"].ToString();
            }
            
        }


        protected void btn_Delete_Click(object sender, EventArgs e)//注销账号
        {

        }

        protected void btn_Exit_Click(object sender, EventArgs e)//退出登录
        {
            Response.Redirect("~/Login.aspx");

        }
    }
}

Web.config:

<?xml version="1.0" encoding="utf-8"?>

<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  https://go.microsoft.com/fwlink/?LinkId=169433
-->

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.0" />
    </system.web>

  <connectionStrings>

    <add name="SQL" connectionString="data source=DESKTOP-NA2OPPJ\SQLEXPRESS;database=users;user id=sa;pwd=123"/>


  </connectionStrings>

</configuration>

运行结果部分截图：

项目源码：利用ASP.NET和百度地图API开发的校园地图-Web开发代码类资源-CSDN下载

疆~

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
6
评论
基于ASP.NET，AJAX，Sqlserver和百度地图API开发的西南科技大学校园地图

目录Login.aspx：Login.aspx.cs:Register.aspxRegister.aspx.cs:isUserNameExist.aspx.cs:Map.aspx:Map.aspx.cs:Web.config:运行结果部分截图：项目源码：https://download.csdn.net/download/qq_40323256/108892...
复制链接

扫一扫