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

运行效果图：

转载于:https://www.cnblogs.com/gawking/p/3541103.html

Google Maps API　调用实例相关推荐

ASP.NET调用V3版本的Google Maps API
英文原文:Google Maps API V3 for ASP.NET 译文出处:青藤园译文作者:王国峰译文链接:ASP.NET中使用Google Maps API V3[译] 简介 Google ...
Google Maps API实例-地图搜索
本文实现google maps API主要的函数库 html: <%@ Page Language="C#" AutoEventWireup="true" ...
使用Google Maps API和google-maps-react进行React Apps
This tutorial aims at integrating the google maps API to your React components and enabling you to d ...
Google maps API开发
Google maps API开发注:经纬度的查询,找了半天,终于找着活神仙了,(*^__^*) 嘻嘻-- 1.经纬度查询工具:http://www.playgoogle.com/googlemap ...
Google Maps API V3 之绘图库
绘图库本文档中的概念仅适用于 google.maps.drawing 库中提供的地图项.默认情况下,系统在加载 Maps JavaScript API 时不会加载该库,您必须使用 libraries ...
Google Maps API 简易教程（四）
Google Maps 类型一.基本地图类型 Google Maps API支持一下map类型: .ROADMAP(正式的,默认为2D地图) .SATELLITE(逼真的地图) .HYBRID(逼真 ...
Google Maps API v3：如何删除所有标记？
本文翻译自:Google Maps API v3: How to remove all markers? In Google Maps API v2, if I wanted to remove al ...
如何使用Google Maps API禁用鼠标滚轮缩放
我正在使用Google Maps API(v3)在页面上绘制一些地图. 我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放,但我不确定如何. 我已禁用scaleControl(即删除了缩放UI元素),但这 ...
Google maps API开发（一）(转)
一.加载Google maps API <script type="text/javascript" src="http://ditu.google.com/map ...
maps-api-v3_Android Google Maps API集成
maps-api-v3 In this tutorial we'll show how to integrate android google maps API in our application ...

Google Maps API　调用实例

Google Maps API　调用实例相关推荐

最新文章

热门文章

Google Maps API 调用实例

Google Maps API 调用实例相关推荐

最新文章

热门文章

Google Maps API　调用实例

Google Maps API　调用实例相关推荐