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&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"/>

运行效果图：