google map api 添加地标的例子（ZZ）

Google Map API应用例子源代码

最近项目需要做一个地图的功能，上面要加上一些地标，以方便用户使用，所以今天花时间看了看Google API搞了好一会儿，终于做到满足自已的功能要求了，发布出来给需要的朋友看看。
其实GoogleMap API还是比较好用的，慢慢看GoogleMap API的帮助都可以做出来，我这里主要介绍的是怎么将地标存放起来，再读出来。不然只是一个地图在哪儿没有什么意义。
我这里是用XML来存放的，存下来的数据还是比较简单，你可以根据自已的需要做一些修改就可以了，也可以换成数据库来存放。


Jquery.GoogleMap.js源代码内容
/*
-- GoogleMap操作类
-- 作者:李华顺
-- 官方网站： http://www.wathon.com/
-- 我的博客： http://huacn.cnblogs.com/
-- 演示地址： http://www.wathon.com/opensource/js/GoogleMap/Default.aspx
-- 使用请保存署名
*/

//创建GoogleMap
//panelMap - 显示地图的对象区域
//showScale - 是否显示改变大小的控件 true false
//showLargeControl - 是否显示切换控件  true false
//showTypeControl - 是否显示切换显示类型的按钮
//showZoom - 是否显示左下角的小地图
//zoomSize - 视觉距离
var clickListener ;
var GoogleMapCreate = function(panelMap,showScale,showLargeControl,showTypeControl,showZoom,zoomSize){
    myMap = new GMap2(panelMap);
    if(showLargeControl)
    {
        myMap.addControl(new GLargeMapControl());        
    }
    else
    {
         myMap.addControl(new GSmallMapControl());  
    }
    
    
    if(showTypeControl)
    {
        myMap.addControl(new GMapTypeControl());
    }
    
    
    if(showScale)
    {
        myMap.addControl(new GScaleControl());
    }
    
    if(showZoom)
    {
        myMap.addControl(new GOverviewMapControl());
    }
    
    myMap.enableDoubleClickZoom();
    myMap.enableContinuousZoom();
    
    myMap.setCenter(new GLatLng(39.917, 116.397), zoomSize,G_SATELLITE_MAP);
    return myMap;
};


//添加事件
var GoogleMapAddEvent = function(myMap,eventName,fun){
    clickListener = GEvent.addListener(myMap,eventName,fun);
};

//去除事件
var GoogleMapRemoveEvent = function(myMap,eventName){
    GEvent.removeListener(clickListener);
};


//在指定坐标上显示tip提示
var GoogleMapShowTip = function(myMap,point,text){
    myMap.openInfoWindow(point,document.createTextNode(text));
};


//在指定坐标上加入地标
var GoogleMapNewMarker = function(myMap,point){
    var marker = new GMarker(point);
    myMap.addOverlay(marker);
    return marker;
};

//根据坐标点取得X坐标
var GoogleMapPointX = function(point){
    return point.lat();
};

//根据坐标点取得Y坐标
var GoogleMapPointY = function(point){
    return point.lng();
};


服务端部分的源代码内容
/*
-- GoogleMap操作类
-- 作者:李华顺
-- 官方网站： http://www.wathon.com/
-- 我的博客： http://huacn.cnblogs.com/
-- 演示地址： http://www.wathon.com/opensource/js/GoogleMap/Default.aspx
-- 使用请保存署名
*/


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;


namespace GoogleMap
{
    public partial class _Default : System.Web.UI.Page
    {
        protected string mapName = "";
        protected string mapAreaX = "";
        protected string mapAreaY = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            initPage();
        }

        public void initPage()
        {
            AreaList myArea = new AreaList(Server.MapPath("App_Data\\"));

            if (Request["type"] == "savearea")
            {
                Response.ContentType = "text/xml";
                Response.ContentEncoding = System.Text.Encoding.UTF8;

                //保存地标
                string strName = Request["name"];
                string strAreaX = Request["x"];
                string strAreaY = Request["y"];

                myArea.AppendNew(strName, strAreaX, strAreaY);


                WriteResult(Request["name"]);

                Response.End();
            }

            System.Xml.XmlNodeList myNodes = myArea.GetAreaList();
            for (int i = 0; i < myNodes.Count; i++)
            {
                if (i > 0)
                {
                    mapName += ",";
                    mapAreaX += ",";
                    mapAreaY += ",";
                }

                mapName += "'" + myNodes .SelectSingleNode("name").InnerText + "'";
                mapAreaX += "'" + myNodes.SelectSingleNode("x").InnerText + "'";
                mapAreaY += "'" + myNodes.SelectSingleNode("y").InnerText + "'";


            }

        }

        private void WriteResult(string strValue)
        {
            string strContent = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
            strContent += "<result>" + strValue + "</result>";
            Response.Write(strContent);
            Response.End();
        }
    }

    /// <summary>
    /// AreaList 的摘要说明
    /// </summary>
    public class AreaList
    {
        XmlDocument xmlControl = new XmlDocument();
        string strFileName = "\\MapArea.xml";

        public AreaList(string appPath)
        {
            strFileName = appPath + strFileName;
            if (!System.IO.File.Exists(strFileName))
            {
                CreateAreaListFile();
            }


            xmlControl.Load(strFileName);
        }

        private void CreateAreaListFile()
        {
            xmlControl.LoadXml("<?xml version=\"1.0\" encoding=\"utf-8\" ?><list></list>");
            xmlControl.Save(strFileName);
        }

        public void AppendNew(string strName, string strX, string strY)
        {
            XmlNode xmlNodeLast = xmlControl.SelectSingleNode("//list");
            string strXml = "<name>" + makeCDATA(strName) + "</name><x>" + makeCDATA(strX) + "</x><y>" + makeCDATA(strY) + "</y>";
            XmlNode xmlNode = xmlControl.CreateNode(XmlNodeType.Element, "item", "");
            xmlNode.InnerXml = strXml;
            xmlNodeLast.AppendChild(xmlNode);
            xmlControl.Save(strFileName);
        }

        /// <summary>
        /// 取得旧的列表
        /// name,area
        /// 地标名,坐标
        /// </summary>
        /// <returns></returns>
        public System.Xml.XmlNodeList GetAreaList()
        {
            System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
            xmlDoc.Load(strFileName);

            System.Xml.XmlNodeList myNodes = xmlDoc.SelectNodes("//list//item");
            return myNodes;
        }

        private string makeCDATA(string strValue)
        {
            return "<![CDATA[" + strValue + "]]>";
        }
    }
}

HTML部分的源代码内容
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="GoogleMap._Default" %>

<!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>GoogleMap例子</title>    
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.interface.js"></script>
    <script type="text/javascript" src="scripts/jquery.xml.js"></script>
    <script type="text/javascript" src="scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="scripts/jquery.googlemap.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAC-ble-vmy_g7-Qvem5P86xS0EUK71C1jmG2AnVsYTJQQEVD0-RQfglPje0X6A_y2FM1T2dU6BPVKQg"></script>
    <style type="text/css">
        body{
            font-size:12px;
            font-family:宋体;
            text-align:center;
        }
        
        #layer { margin:20px auto; text-align:left; width:800px;}
        .toolbar,.arealist { background:#F5F5F5;border:1px solid #F0F0F0; padding:5px; margin-bottom:8px;}
        
        #panelMap {width:800px; height:450px;}
        
        .window { }
    </style>
    <script type="text/javascript">
        var myMap;
        var MapName = [<%=mapName %>];
        var MapAreaX = [<%=mapAreaX %>];
        var MapAreaY = [<%=mapAreaY %>];
        var zoomSize = 5;
        
        
        $(document).ready(function(){
            myMap = GoogleMapCreate(document.getElementById("panelMap"),true,true,true,true,zoomSize);
            
            //给“添加”按钮的click放入事件
            $('#lblAddArea').click(function() {
                //$('div#info').show('slow');
                GoogleMapAddEvent(myMap, "click", function(marker, point) {
                    GoogleMapNewMarker(myMap,point);
                    var areaName = prompt("请输入地标名称：","");
                    var x = GoogleMapPointX(point);
                    var y = GoogleMapPointY(point);
                    $.ajax({
                        url:"default.aspx?type=savearea&x="+x+"&y="+y+"&name="+areaName,
                        type:"post",
                        success:function(xmlData){
                            GoogleMapShowTip(myMap,point,GetNodeValue(xmlData.selectSingleNode("result")));                            
                        }
                    });
                    GoogleMapRemoveEvent(myMap,"click");
                });
            });
            
            //读旧的地标
            writeAreaList();
            
            //开启自动切换地标
            //autoSelectMarker();
        });
        
        //创建地标到地图上
        var setMapArea = function(tip,x,y){
            var point = new GLatLng(x,y,zoomSize);
            
            var myMarker = GoogleMapNewMarker(myMap,point);
            GEvent.addListener(myMarker, "click", function() {
                GoogleMapShowTip(myMap,point,tip);
            });
            
            
        };
        
        //生成地标
        var writeAreaList = function(){
            var areaList = $("div.arealist");
            
            for(var i=0; i<MapName.length;i++)
            {
                var tip = MapName;              
                var x = MapAreaX;
                var y = MapAreaY;
                areaList.append("<a href=\"javascript:selectMarker('" + tip + "'," + x + "," + y + ");\">"+tip+"</a> ");
                setMapArea(tip,x,y);
            }
        };      
        
        //选择一个地标
        var selectMarker = function(tip,x,y){    
            var point = new GLatLng(x,y);
                    
            myMap.panTo(point,zoomSize);
            GoogleMapShowTip(myMap,point,tip);
        };
        
        //自动在几个地标上切换的事件
        var currentMarkerID = 0;
        var autoSelectMarker = function(){
            
            if(currentMarkerID == MapName.length)
            {                     
                currentMarkerID = 0;
            }
            
            var tip = MapName[currentMarkerID];              
            var x = MapAreaX[currentMarkerID];
            var y = MapAreaY[currentMarkerID];
            selectMarker(tip,x,y);
            currentMarkerID ++;
            
            setTimeout(autoSelectMarker,4000);
        }; 
                
    </script>    
</head>
<body onunload="GUnload()">
    <form id="form1" runat="server">
    <div id="layer">
        <div class="toolbar">
            <a href="javascript:;" id="lblAddArea">添加地标</a>
        </div>
        <div class="arealist">
            
        </div>
        <div id="panelMap">
        
        </div>
    </div>
    </form>
</body>
</html>