本实例介绍如何调用Ｇｏｏｇｌｅ Ｍａｐｓ ＡＰＩ，并实现用鼠标标注地图，保存进数据库，以及二次加载显示等。
１.需要新建一个自定义控件（如：Ｍ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(',')[];
Map1.Longitude = StrLoactID.Split(',')[];
} 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"/>
运行效果图：