Google Maps API 调用实例

本实例介绍如何调用Ｇｏｏｇｌｅ　Ｍａｐｓ　ＡＰＩ，并实现用鼠标标注地图，保存进数据库，以及二次加载显示等。

１.需要新建一个自定义控件（如：Ｍap．ａｓcｘ），用于显示Ｇｏｏｇｌｅ地图：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Map.ascx.cs" Inherits="StarSoft.UI.Customer.UserControl.Map" %>
<div id="map" style=" 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&amp;v=2&amp;sensor=false&amp;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"/>

运行效果图：