基于ASP.NET技术将数据库中坐标点数据呈现到GOOGLE地图上 (google map开发高级篇)

最新推荐文章于 2021-05-08 18:55:05 发布
最新推荐文章于 2021-05-08 18:55:05 发布
阅读量521 收藏 2
点赞数

本文主要记录了将数据库中坐标点数据呈现到GOOGLE地图上的相关代码，本文主要用到的技术有asp.net、jquery、google map api等。废话不多说代码如下：

1、  页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="LdConsole.Web.GoogleMap" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA48kTsSent7VKDiynLll5-BSenMbw3-kZLokidiRzbXMRfaqj2RTxeyIWvnSmTZOhXWzCeitYb-2Bng"

        type="text/javascript"></script>

    <script src="../Js/lib/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var CollectorName = "";

        function adjustLight() {

            var text = document.getElementById('test').value;

            $("#message").html("调整亮度成功！"+text);

        }

 

        function initialize() {

            //创建地图对象

            if (GBrowserIsCompatible()) {

                var map = new GMap2(document.getElementById("map_canvas"));

                map.setCenter(new GLatLng(39.917, 116.397), 14);

                //jquery读取数据库灯杆信息，并创建地图标记

                function createMarker(latlng, number) {

                    var marker = new GMarker(latlng);

                    marker.value = number;

                    GEvent.addListener(marker, "click", function () {

                        //在标签里面生成测量点信息（灯泡）

                        var myHtml = "亮度值：<input id=\"test\"> <input type=\"button\"  onClick=\"adjustLight()\" value=\"调整亮度\">";

                        map.openInfoWindowHtml(latlng, myHtml);

                    });

                    return marker;

                }

                //生成灯杆地图标记

                var queryString = "1=1";

                var tmp = "";

                $.ajax({

                    type: "get",

                    dataType: "json",

                    url: 'ServerAjax.ashx?method=GetMapFOI&queryString=' + queryString,

                    data: "tmp=" + tmp,

                    complete: function () { $("#load").hide(); }, //

                    success: function (msg) {//

                        var data = msg.table;

                        $.each(data, function (i, n) {

                            var latlng = new GLatLng(n.Longitude, n.Latitude);

                            map.addOverlay(createMarker(latlng, i + 1));

                        });

                    }

                });

                //

            }

        }

        

    </script>

</head>

<body οnlοad="initialize()" οnunlοad="GUnload()">

    <div id="map_canvas" style="width: 500px; height: 300px">

    </div>

    <div id="message">

    </div>

</body>

</html>

2、  后台代码：

新建ServerAjax.ashx文件，代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Text;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.UI;

 

namespace LdConsole.Web

{

    /// <summary>

    /// ServerAjax 的摘要说明

    /// </summary>

    public class ServerAjax : IHttpHandler

    {

 

        public void ProcessRequest(HttpContext context)

        {

            string method = System.Web.HttpContext.Current.Request.QueryString["method"].Trim();

            string queryString = System.Web.HttpContext.Current.Request.QueryString["queryString"].Trim();

           

            switch (method)

            {

                case "GetMapFOI"://生成地图标记

                    context.Response.Write(GetMapFOI(queryString));

                    break;

            }

        }

        //根据灯杆库里的数据生成地图上灯杆标记 QueryString为查询筛选条件

        private String GetMapFOI(string queryString)

        {

            string sql;

            sql = "select * from tbCollector where " + queryString;

            string dbfile = ConfigurationManager.ConnectionStrings["KwstuConn"].ToString();

            SqlConnection conn = new SqlConnection(dbfile);

            SqlDataAdapter da = new SqlDataAdapter(sql, conn);

 

            DataTable dt = new DataTable("table");

            da.Fill(dt);

            return DataTable2Json(dt);

        }

        //生成Json数据格式方法

        private string DataTable2Json(DataTable dt)

        {

            StringBuilder jsonBuilder = new StringBuilder();

            jsonBuilder.Append("{\"");

            jsonBuilder.Append(dt.TableName);

            jsonBuilder.Append("\":[");

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                jsonBuilder.Append("{");

                for (int j = 0; j < dt.Columns.Count; j++)

                {

                    jsonBuilder.Append("\"");

                    jsonBuilder.Append(dt.Columns[j].ColumnName);

                    jsonBuilder.Append("\":\"");

                    jsonBuilder.Append(this.JsonStringFormat(dt.Rows[i][j].ToString()));

                    jsonBuilder.Append("\",");

                }

                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

                jsonBuilder.Append("},");

            }

            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

            jsonBuilder.Append("]");

            jsonBuilder.Append("}");

            return jsonBuilder.ToString();

        }

 

        //Json数据源字符串格式化方法 防止返回的Json数据中有非法字符造成程序出错

        public string JsonStringFormat(string JsonString)

        {

            return JsonString.Trim().Replace("\"", "\\\"").Replace("\\", "/").Replace("\r\n", "").Replace("\r", "").Replace("\r\r", "").Replace("\n", "").Replace("\n\r", "");

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

回家乡
关注
Google Map开发（一） ASP.NET中调用Google Map API实现简单的地图显示
李金的专栏
07-02 1万+
<br /> <br /><br /><br />1、注册gooogle map api key。<br />输入网址http://www.google.com/apis/maps/<br />到google map api主页<br /><br />在页面的右面点击注册一个Gooogle地图API密钥<br /><br />在新的页面中进行如下设置并点击生成API密钥。其中我的网址可以是域名、IP，建议调试的时候为http://localhost申请一个Key，便于测试和修改。<br /><br />点击
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍...
weixin_33754065的博客
03-22 233
摘要： 在这篇文章中，你将学会，如何利用百度地图API进行标注。如何使用API新增的打车费用接口。 ------------------------------------------------------------------------------------------------------- 哇，好久没有上来了。主要是因为最近工作繁忙，加上休息时间被各种排练、社团活动占满，导致...
【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注...
weixin_33757609的博客
04-12 177
摘要： 　　上一章留个悬念，"如果自己没有地理坐标的数据库，应该怎样制作银行的分布地图呢？" 　　答案就是，利用百度地图上的数据。 ---------------------------------------------------------------------------------------------- 我们不用花大把时间写代码去跑数据，只需要利用百度地图API提供的免费接...
点云叠加到google earth
06-26
将二维或三维点云数据叠加到google earth上，需要点云的经纬度和高程坐标
google地图调用
04-13
本实例演示了如何调用google地图,1.js,map.js给出了谷歌地图定位和轨迹回放的代码
GoogleMap Api二次开发+Asp.Net+数据库+GPS
12-12
在本实例中，我们主要探讨如何使用GoogleMap API进行二次开发，并结合Asp.Net、数据库以及GPS技术，创建一个功能丰富的Web应用。首先，我们来深入理解这些关键知识点。 1. GoogleMap API: GoogleMap API是Google...
ASP.NET源码——GoogleMap地图控件应用源码.zip
10-10
在这个特定的压缩包中，"GoogleMap地图控件应用源码.zip"包含的是一个使用ASP.NET技术实现的Google Map API的控件应用。这个源码示例可以帮助开发者了解如何在ASP.NET项目中集成Google Maps，为网站或应用程序添加...
ASP.NET版谷歌地图GoogleMap
02-14
ASP.NET版谷歌地图GoogleMap是一款基于ASP.NET技术的控件，它允许开发者在网页应用中集成谷歌地图服务，提供交互式的地图展示和地理定位功能。这个控件是用C#语言编写的，确保了与.NET Framework的良好兼容性，并且...
asp.net 2.0 类似GoogleMap地图网站的简单实现
09-04
在ASP.NET 2.0中实现类似GoogleMap的地图网站，主要涉及以下几个关键技术点： 1. **地图图片的切片与存储**： - 地图通常由一张大图分割成多张小图，每张小图代表地图的一个部分。这里采用256像素X256像素的正方形...
GoogleMap API + ASP.NET(C#)
10-28
2. **动态数据绑定**：可以将数据库中的地理位置数据动态绑定到地图上，例如显示多个店铺的位置。 3. **用户认证和授权**：ASP.NET内置的身份验证和授权机制，可以确保只有授权用户才能访问特定的地图功能。 4. **...
ASP.NET显示Google地图的控件及实例
03-17
内容索引:.NET源码,控件组件,Google地图　　这是一些GoogleMap地图控件的应用源码，环境，网站中加入Google地图的话，这款控件正是您需要的，它可以按照普通地图和卫星地图的模式进行显示及二次开发应用，可以进行标注、设置显示交通路线等功能。
vb电子地图查询（转）
06-29
转的别人的，挺基础的。
如何在asp.net中使用百度地图并动态获取到数据库中的坐标点进行标注
倔强的蜗牛
06-24 4682
前段时间忙于公司的一个项目，项目中一个功能就是dong
教程 | 批量将经纬度坐标标注到地图上，不用Python，不用GIS软件
gis9的专栏
05-08 2702
小O地图EXE版三大功能，地图数据查询、地图数据分析、地图可视化！ 在以往的文章中大多介绍前两者，可视化功能介绍较少，本文将直接上视频，通过B站视频演示地图可视化功能使用。 本文视频演示使用小O地图软件在地图上批量标注经纬度坐标，并可以按分类、分颜色、分大小来区分显示，无需编码，无需专业GIS软件，便可以完成地图可视化功能。 教程 | 批量将经纬度坐标标注到地图上，不用Python、不用GIS软件 官网下载http://www.GIS9.com，答疑见本文末加QQ群 955 ...
在Asp.NET网站中加载百度地图
小娴不是仙的博客
08-30 1638
小可爱们，只需要三个步骤，就可以在.NET网站中加载上百度地图，嗯~听着就敲简单。     一.     在百度地图开放平台上申请密钥。           完成界面如下，复制下来这个AK值即密钥，一会将用到。     二     网站中新建Web用户控件。（这个就不上图了，哈）     三     在新建的Web用户控件中，将asp网页修改如下    
从数据库获取到的多个点（有具体的经纬度），显示在百度地图上
热门推荐
ougexingfuba的博客
05-26 1万+
数据库结构：long是经度，lat是纬度。。这张表示行程点数据表。。 这张表是行程设定表。。。 控制器代码： public function map(){ //查询一篇文章每一天的行程点 $trip1 = M('Ltinerary_setting')->join('LEFT JOIN pigcms_system_trip on pigcms_system_trip.id = pigc
【python毕业设计】django学生管理系统的设计与开发（完整前后端源码）.zip
最新发布
11-05
开发语言：Python 框架：django Python版本：python3.7.7 数据库：mysql 5.7+ 数据库工具：Navicat11 开发软件：PyCharm
ASP.NET与数据库高级交互技术探索
ASP.NET与相关数据库技术的高级指南旨在帮助开发者深入理解ASP.NET的高级特性，掌握动态网站开发的最佳实践，包括高效的数据处理、错误处理、性能优化和安全性措施。通过学习，开发者能够构建出更强大、更健壮的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值