Google Maps API 调用实例
生活随笔
收集整理的這篇文章主要介紹了
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"/>運行效果圖：
轉載于:https://www.cnblogs.com/gawking/p/3541103.html
總結
以上是生活随笔為你收集整理的Google Maps API 调用实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OpenLayers相关资料
- 下一篇： 集成UG和ANSYS之二----upup