Google Maps API 调用实例
本实例介绍如何调用Ｇｏｏｇｌｅ Ｍａｐｓ ＡＰＩ，并实现用鼠标标注地图，保存进数据库，以及二次加载显示等。
１.需要新建一个自定义控件（如：Ｍap．ａｓcｘ），用于显示Ｇｏｏｇｌｅ地图：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Map.ascx.cs" Inherits="StarSoft.UI.Customer.UserControl.Map" %> <div id="map" style="width: 100%; height: 360px;"> </div> <table style="display: none"> <tr> <td width="60px"> <span> 纬度</span> </td> <td> <asp:TextBox ID="txtY" runat="server" CssClass="txtbase" onfocus="this.className='txtfocus';" onblur="this.className='txtbase';" onpropertychange="javascript:CheckInputFloat(this);"></asp:TextBox> </td> <td> <span> 经度</span> </td> <td> <asp:TextBox ID="txtX" runat="server" CssClass="txtbase" onfocus="this.className='txtfocus';" onblur="this.className='txtbase';" onpropertychange="javascript:CheckInputFloat(this);"></asp:TextBox> </td> </tr> <tr> <td colspan="4"> <script src=" http://ditu.google.com/maps?file=api&v=2&sensor=false&key=<%=System.Configuration.ConfigurationSettings.AppSettings["googlemapkey"].Trim() %>" type="text/javascript"></script> <script language="javascript" type="text/javascript"> function CheckInputFloat(oInput) { if ('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/, '')) { oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' : oInput.value.match(/\d{1,}\.{0,1}\d{0,}/); } } //<![CDATA[ var x; var geocoder; var marker; if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var LatValue = document.getElementById("<%=txtX.ClientID%>").value; var LngValue = document.getElementById("<%=txtY.ClientID%>").value; if ((LatValue == "") || (LngValue == "")) { map.setCenter(new GLatLng(30.25372, 120.13343), 13); } else { map.setCenter(new GLatLng(LatValue, LngValue), 13); var curpoint = new GLatLng(LatValue, LngValue); marker = new GMarker(curpoint, this.ico); map.addOverlay(marker); } geocoder = new GClientGeocoder(); } function createMarker(point, title, html) { var marker = new GMarker(point); //GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml(html,{maxContent: html,maxTitle: title});}); return marker; } function showAddress(address) { if (geocoder) { geocoder.getLatLng( '中国' + address, function (point) { if (!point) { // alert(address + " 未找到"); } else { if (marker)//移除上一個點 { map.removeOverlay(marker); } map.setCenter(point, 13); var title = "地址"; marker = createMarker(point, title, address); map.addOverlay(marker); //marker.openInfoWindowHtml(address,{ maxContent: address, maxTitle: title}); } } ); } } GEvent.addListener(map, 'click', function (overlay, point) { if (point) { map.clearOverlays(); var marker = new GMarker(point, { draggable: true }); map.addOverlay(marker); GEvent.addListener(marker, "dragstart", function () { }); GEvent.addListener(marker, "dragend", function () { point = marker.getLatLng(); document.getElementById("<%=txtY.ClientID%>").value = point.x; document.getElementById("<%=txtX.ClientID%>").value = point.y; }); document.getElementById("<%=txtY.ClientID%>").value = point.x; document.getElementById("<%=txtX.ClientID%>").value = point.y; } }); map.enableScrollWheelZoom(); map.addControl(new GSmallZoomControl()); map.addControl(new GMapTypeControl()); //]]> </script> </td> </tr> </table>
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; namespace StarSoft.UI.Customer.UserControl { public partial class Map : System.Web.UI.UserControl { /// <summary> /// 纬度 /// </summary> public string Latitude { get { return this.txtX.Text; } set { this.txtX.Text = value; } } /// <summary> /// 经度 /// </summary> public string Longitude { get { return this.txtY.Text; } set { this.txtY.Text = value; } } protected void Page_Load(object sender, EventArgs e) { } } }
２.页面中调用这个自定义控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AreaLocation.aspx.cs" Inherits="StarSoft.UI.Customer.AreaLocation" %> <%@ Register src="UserControl/Map.ascx" tagname="Map" tagprefix="uc1" %> <!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> <webcontrol:Style ID="Style" runat="server" /> <script language="javascript" type="text/javascript"> function ChooseLoaction() { var txtX=document.getElementById('<%=Map1.FindControl("txtX").ClientID %>').value; var txtY= document.getElementById('<%=Map1.FindControl("txtY").ClientID %>').value; if(txtX=="") { alert('请选择经纬度！'); } else { window.returnVal = txtX+"|"+ txtY; window.parent.hidePopWin(true); } } </script> </head> <body> <form id="form1" runat="server"> <div class="popForm" > <div class="mainForm"> <uc1:Map ID="Map1" runat="server" /> </div></div> <div class="operArea"> <div class="btnArea" > <input type="button" id="BtnQuery" class="btnSubmit" runat="server" onclick="javascript:ChooseLoaction();"/> <input type="button" id="close" class="btnReturn" onclick="javascript:parent.hidePopWin(false);" runat="server"/> </div> </div> </form> </body> </html>
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; namespace StarSoft.UI.Customer { public partial class AreaLocation : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(StrLoactID) && StrLoactID != "null") { Map1.Latitude = StrLoactID.Split(',')[0]; Map1.Longitude = StrLoactID.Split(',')[1]; } if (!IsPostBack) { BtnQuery.Value = StarSoft.Common.ResourceManager.Field("Query"); close.Value = StarSoft.Common.ResourceManager.Field("CancelBtn"); if (Ty != "") { close.Value = StarSoft.Common.ResourceManager.Field("CloseBtn"); BtnQuery.Style["display"] = "none"; } } } /// <summary> /// 经纬度信息 /// </summary> public string StrLoactID { get { try { return Request.Params["LoactID"].ToString(); } catch { return ""; } } } /// <summary> /// 经纬度信息 /// </summary> public string Ty { get { try { return Request.Params["Ty"].ToString(); } catch { return ""; } } } } }
３.ｗｅｂ．ｃｏｎｆｉｇ文件中配置Ｇｏｏｇｌｅ Ｍａｐ访问秘钥：
<add key="googlemapkey" value="ABQIAAAAFLEnBlXXNVEsCX6NrllENxRtJCFYwXExx0HqCDFUHyWjOHbgXhTNZ_AeqPjv3EmRwdeButm3wRXAuw"/>
运行效果图：
