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

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

代码如下：

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窗体

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 运行效果，如下图

仅仅是测试，所以经纬度间隔比较小，测试了一下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.csdn.net/vbangle/article/details/5643091