Google Map API應(yīng)用例子源代碼(已修正) - 李華順的博客 - 博客園

古羅 2007-09-22

展開全文

Google Map API應(yīng)用例子源代碼

最近項目需要做一個地圖的功能，上面要加上一些地標(biāo)，以方便用戶使用，所以今天花時間看了看Google API搞了好一會兒，終于做到滿足自已的功能要求了，發(fā)布出來給需要的朋友看看。
其實GoogleMap API還是比較好用的，慢慢看GoogleMap API的幫助都可以做出來，我這里主要介紹的是怎么將地標(biāo)存放起來，再讀出來。不然只是一個地圖在哪兒沒有什么意義。
我這里是用XML來存放的，存下來的數(shù)據(jù)還是比較簡單，你可以根據(jù)自已的需要做一些修改就可以了，也可以換成數(shù)據(jù)庫來存放。

Jquery.GoogleMap.js源代碼內(nèi)容

/*
-- GoogleMap操作類
-- 作者:李華順
-- 官方網(wǎng)站：http://www.
-- 我的博客：http://huacn.cnblogs.com
-- 演示地址：http://www./opensource/js/GoogleMap/Default.aspx
-- 使用請保存署名
*/

//創(chuàng)建GoogleMap
//panelMap - 顯示地圖的對象區(qū)域
//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);
};

//在指定坐標(biāo)上顯示tip提示
var GoogleMapShowTip = function(myMap,point,text){
    myMap.openInfoWindow(point,document.createTextNode(text));
};

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

//根據(jù)坐標(biāo)點取得X坐標(biāo)
var GoogleMapPointX = function(point){
    return point.lat();
};

//根據(jù)坐標(biāo)點取得Y坐標(biāo)
var GoogleMapPointY = function(point){
    return point.lng();
};

服務(wù)端部分的源代碼內(nèi)容

/*
-- GoogleMap操作類
-- 作者:李華順
-- 官方網(wǎng)站：http://www.
-- 我的博客：http://huacn.cnblogs.com
-- 演示地址：http://www./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;

                //保存地標(biāo)
                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[i].SelectSingleNode("name").InnerText + "'";
                mapAreaX += "'" + myNodes[i].SelectSingleNode("x").InnerText + "'";
                mapAreaY += "'" + myNodes[i].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
        /// 地標(biāo)名,坐標(biāo)
        /// </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部分的源代碼內(nèi)容

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="GoogleMap._Default" %>

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

<html xmlns="http://www./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("請輸入地標(biāo)名稱：","");
                    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");
                });
            });

            //讀舊的地標(biāo)
            writeAreaList();

            //開啟自動切換地標(biāo)
            //autoSelectMarker();
        });

        //創(chuàng)建地標(biāo)到地圖上
        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);
            });


        };

        //生成地標(biāo)
        var writeAreaList = function(){
            var areaList = $("div.arealist");

            for(var i=0; i<MapName.length;i++)
            {
                var tip = MapName[i];
                var x = MapAreaX[i];
                var y = MapAreaY[i];
                areaList.append("<a href=\"javascript:selectMarker('" + tip + "'," + x + "," + y + ");\">"+tip+"</a> ");
                setMapArea(tip,x,y);
            }
        };

        //選擇一個地標(biāo)
        var selectMarker = function(tip,x,y){
            var point = new GLatLng(x,y);

            myMap.panTo(point,zoomSize);
            GoogleMapShowTip(myMap,point,tip);
        };

        //自動在幾個地標(biāo)上切換的事件
        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">添加地標(biāo)</a>
        </div>
        <div class="arealist">

        </div>
        <div id="panelMap">

        </div>
    </div>
    </form>
</body>
</html>