[Asp.Net WinForm/Google]在Googel Map上放置多个Marker标记 /API3版

转载 于 2013-03-20 10:31:19 发布 · 1.5k 阅读 · 1

本文介绍如何使用C#和JavaScript实现Google地图上批量添加标记点的功能。通过后台处理程序生成JSON数据，前端利用jQuery和Google Maps API进行数据读取及地图标记。

1.添加新项——一般处理程序

image

代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Data;
using System.Web.Script.Serialization;
using System.Diagnostics;

namespace WebApplication2
{
    /// <summary>
    /// GoogleMapHandler 的摘要说明
    /// </summary>
    public class GoogleMapHandler : IHttpHandler
    {
        DataTable db = null;
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string _sJsonResult = GetMapInfo().SerializeToJSon();
            context.Response.Write(_sJsonResult);
            Debug.WriteLine(_sJsonResult);
        }

        private DataTable GetMapInfo()
        {
            if (db == null)
            {
                db = DataTableOperate.CreateDbTable("Lat,Lng,Title");
                DataRow dr = null;
                //dr = db.NewRow();
                //dr["Lat"] = "121.49073243141174";
                //dr["Lng"] = "31.20251480366567";
                //dr["Title"] = "蒙自路招商银行";
                //db.Rows.Add(dr);

                //dr = db.NewRow();
                //dr["Lat"] = "121.4917516708374";
                //dr["Lng"] = "31.201514525109754";
                //dr["Title"] = "蒙自路360号2";
                //db.Rows.Add(dr);

                //dr = db.NewRow();
                //dr["Lat"] = "121.48869395256042";
                //dr["Lng"] = "31.203253534708064";
                //dr["Title"] = "蒙自路建设银行";
                //db.Rows.Add(dr);
                double _dAdd = 0.0001;
                for (int i = 0; i < 100; i++)
                {
                    dr = db.NewRow();
                    dr["Lat"] = 121.49175 + _dAdd;
                    dr["Lng"] = 31.20151 + _dAdd;
                    dr["Title"] = "蒙自路招商银行" + i;
                    db.Rows.Add(dr);
                    _dAdd = 0.000005 + _dAdd;
                }

            }
            return db;
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
1.1其中：DataTableOperate.CreateDbTable如下：
/// <summary>
    /// 创建Datatable，规范：列名|列类型,列名|列类型,列名|列类型
    /// 举例：CustomeName|string,Gender|bool,Address
    /// </summary>
    /// <param name="sColumnsInfo"></param>
    /// <returns></returns>
    public static DataTable CreateDbTable(string sColumnsInfo)
    {
        DataTable _dtNew = new DataTable();
        string[] _columnsList = sColumnsInfo.Split(',');
        string _sColumnName;
        string _sColumnType;
        string[] _sSingleColumnInfo;
        foreach (string s in _columnsList)
        {
            _sSingleColumnInfo = s.Split('|');
            _sColumnName = _sSingleColumnInfo[0];
            if (_sSingleColumnInfo.Length == 2)
            {
                _sColumnType = _sSingleColumnInfo[1];
                _dtNew.Columns.Add(new DataColumn(_sColumnName, Type.GetType(SwitchType(_sColumnType))));
            }
            else
            {
                _dtNew.Columns.Add(new DataColumn(_sColumnName));
            }
        }
        return _dtNew;
    }
    private static string SwitchType(string sColumnType)
    {

        string _sCurrentType = string.Empty;
        switch (sColumnType.ToLower())
        {
            case "int":
                _sCurrentType = "System.Int32";
                break;
            case "string":
                _sCurrentType = "System.String";
                break;
            case "decimal":
                _sCurrentType = "System.Decimal";
                break;
            case "double":
                _sCurrentType = "System.Double";
                break;
            case "dateTime":
                _sCurrentType = "System.DateTime";
                break;
            case "bool":
                _sCurrentType = "System.Boolean";
                break;
            case "image":
                _sCurrentType = "System.Byte[]";
                break;
            case "object":
                _sCurrentType = "System.Object";
                break;
            default:
                _sCurrentType = "System.String";
                break;
        }
        return _sCurrentType;
    }
1.2其中：SerializeToJSon如下
public static class JsonOperate
    {
        public static string SerializeToJSon(this DataTable dt)
        {
            JavaScriptSerializer ser = new JavaScriptSerializer();
            List<Dictionary<string, object>> dataRows = new List<Dictionary<string, object>>();
            dt.Rows.Cast<DataRow>().ToList().ForEach(dataRow =>
            {
                var row = new Dictionary<string, object>();
                dt.Columns.Cast<DataColumn>().ToList().ForEach(column =>
                {
                    row.Add(column.ColumnName, dataRow[column]);
                });
                dataRows.Add(row);
            });
            return ser.Serialize(dataRows);
        }
    }

2.添加新项——Web窗体

image

2.1引入Jquery以及Google Map脚本
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

其中需要将Sensor感应设置为False，取消其智能感应位置。

2.2添加JavsScript脚本

2.2.1获取数据，并且添加到Array中，代码如下：
var infoWindow, map;
        var dbarray = new Array();
        $(document).ready(InitDbToPageArray);
        function InitDbToPageArray() {
            $.ajax(
            {
                url: 'GoogleMapHandler.ashx',
                type: 'post',
                async: true,
                data: {},
                dataType: 'json',
                success: function (datas) {
                    $.each(datas, function (index, item) {
                        // AddMarker(item, map);
                        dbarray[index] = item;
                    });
                    $("#proccess").append("数据读取完毕！");
                },
                error: function (result) {
                    alert(result.responseText);
                }

            })
        }
2.2.2 指定需要标记的区域，代码如下
function AddArea(lat, lng, zoomLevel) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: zoomLevel,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            return new google.maps.Map($("#map_canvas")[0], myOptions);
  }
2.2.3 添加标记，代码如下
var t, endTime1;
        function DoAddMackers(map, startIndex) {

            //            $.each(dbarray, function (index, item) {
            //                AddMarker(item, map);
            //            })


            AddMarker(dbarray[startIndex], map);
            startIndex++;
            if (startIndex >= dbarray.length) {
                clearTimeout(t);
                var endTime2 = new Date().getTime();
                $("#map_Time").append("结束:" + (new Date()).pattern("yyyy-M-d h:m:s.S") + "<br>");
                $("#map_Time").append("一共:" + dbarray.length + "地图标记," + "耗时:" + (endTime2 - endTime1) + "毫秒." + "<br>");
                return;
            }
            t = setTimeout(function () {
                DoAddMackers(map, startIndex);
            }, 0);



        }

        function AddMarker(item, map) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.Lng, item.Lat),
                map: map,
                title: item.Title
            })

            google.maps.event.addListener(marker, 'click', function () {
                if (!infoWindow) {
                    infoWindow = new google.maps.InfoWindow();
                }

                var contents = '<div id="info">' +
        '<H2>坐标详情</h2>' +
        '<p>经纬度：' + marker.getPosition() + '</a></p>' +
        '<p><a href="#">名称:' + marker.getTitle() + '</a></p>' +
        '</div>';
                infoWindow.setContent(contents);
                infoWindow.open(map, marker);
            });

            google.maps.event.trigger(marker, 'click');
        }
2.3完整代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2.WebForm3" %>

<!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="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var infoWindow, map;
        var dbarray = new Array();
        $(document).ready(InitDbToPageArray);
        function InitDbToPageArray() {
            $.ajax(
            {
                url: 'GoogleMapHandler.ashx',
                type: 'post',
                async: true,
                data: {},
                dataType: 'json',
                success: function (datas) {
                    $.each(datas, function (index, item) {
                        // AddMarker(item, map);
                        dbarray[index] = item;
                    });
                    $("#proccess").append("数据读取完毕！");
                },
                error: function (result) {
                    alert(result.responseText);
                }

            })
        }

        function AddArea(lat, lng, zoomLevel) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: zoomLevel,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            return new google.maps.Map($("#map_canvas")[0], myOptions);
        }


        var t, endTime1;
        function DoAddMackers(map, startIndex) {

            //            $.each(dbarray, function (index, item) {
            //                AddMarker(item, map);
            //            })


            AddMarker(dbarray[startIndex], map);
            startIndex++;
            if (startIndex >= dbarray.length) {
                clearTimeout(t);
                var endTime2 = new Date().getTime();
                $("#map_Time").append("结束:" + (new Date()).pattern("yyyy-M-d h:m:s.S") + "<br>");
                $("#map_Time").append("一共:" + dbarray.length + "地图标记," + "耗时:" + (endTime2 - endTime1) + "毫秒." + "<br>");
                return;
            }
            t = setTimeout(function () {
                DoAddMackers(map, startIndex);
            }, 0);



        }

        function AddMarker(item, map) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.Lng, item.Lat),
                map: map,
                title: item.Title
            })

            google.maps.event.addListener(marker, 'click', function () {
                if (!infoWindow) {
                    infoWindow = new google.maps.InfoWindow();
                }

                var contents = '<div id="info">' +
        '<H2>坐标详情</h2>' +
        '<p>经纬度：' + marker.getPosition() + '</a></p>' +
        '<p><a href="#">名称:' + marker.getTitle() + '</a></p>' +
        '</div>';
                infoWindow.setContent(contents);
                infoWindow.open(map, marker);
            });

            google.maps.event.trigger(marker, 'click');
        }

        Date.prototype.pattern = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份   
                "d+": this.getDate(), //日   
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时   
                "H+": this.getHours(), //小时   
                "m+": this.getMinutes(), //分   
                "s+": this.getSeconds(), //秒   
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                "S": this.getMilliseconds() //毫秒   
            };
            var week = {
                "0": "\u4e00",
                "1": "\u4e00",
                "2": "\u4e8c",
                "3": "\u4e09",
                "4": "\u56db",
                "5": "\u4e94",
                "6": "\u516d"
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + week[this.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }



        function Button3_onclick() {
            $.each(dbarray, function (index, item) {
                $("#DbResult").append("index:" + index + "，  Lng:" + item.Lng + "， Lat:" + item.Lat + "<br>");
            })
        }

        function Button1_onclick() {
            $("#map_Time").append("开始:" + (new Date()).pattern("yyyy-M-d h:m:s.S") + "<br>");
            endTime1 = new Date().getTime();
            if (!map) {
                map = AddArea(31.2029, 121.4914, 14);
            }
            DoAddMackers(map, 0);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="proccess">
    </div>
    <hr />
    <div id="DbResult">
    </div>
    <hr />
    <div id="map_canvas" style="height: 600px">
    </div>
    <hr />
    <div id="map_Time">
    </div>
    <input id="Button3" type="button" value="经纬信息" onclick="return Button3_onclick()" />
    <input id="Button1" type="button" value="加载地图" onclick="return Button1_onclick()" />
    </form>
</body>
</html>

2.4 运行效果，如下图

image

仅仅是测试，所以经纬度间隔比较小，测试了一下1W个标记数据，十分钟左右能标记完，希望有所帮助，谢谢。

2.5 相关参考

http://www.dotblogs.com.tw/shadow/archive/2013/02/01/89662.aspx

http://www.codeproject.com/Tips/261752/Convert-DataTable-to-String-by-Extension-Method

http://blog.youkuaiyun.com/vbangle/article/details/5643091


<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
Jlins
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值