Google Map API应用例子源代码最近项目需要做一个地图的功能，上面要加上一些地标，以方便用户使用，所以今天花时间看了看Google API搞了好一会儿，终于做到满足自已的功能要求了，发布出来给需要的朋友看看。 其实GoogleMap API还是比较好用的，慢慢看GoogleMap API的帮助都可以做出来，我这里主要介绍的是怎么将地标存放起来，再读出来。不然只是一个地图在哪儿没有什么意义。 我这里是用XML来存放的，存下来的数据还是比较简单，你可以根据自已的需要做一些修改就可以了，也可以换成数据库来存放。 Jquery.GoogleMap.js源代码内容/*
-- GoogleMap操作类 -- 作者:李华顺 -- 官方网站：http://www. -- 我的博客：http://huacn.cnblogs.com -- 演示地址：http://www./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. -- 我的博客：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; //保存地标 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 /// 地标名,坐标 /// </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./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("请输入地标名称：",""); 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[i]; var x = MapAreaX[i]; var y = MapAreaY[i]; 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> |
|
|
