google map

最新推荐文章于 2024-07-22 10:14:37 发布

东海青蛙

最新推荐文章于 2024-07-22 10:14:37 发布

阅读量6.6k

点赞数

分类专栏： javascript 文章标签： google api javascript asp.net ajax框架服务器

本文链接：https://blog.csdn.net/eastsea/article/details/3975726

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Google 地图 API 概念

http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html#Localization

Google Maps API 概述

http://book.51cto.com/art/200807/81055.htm

1 Google Maps API 概述

Web API 是通过开放的Internet 传输协议，以标准方式定义并提供可被其他应用调用的服务内容，它通过API 调用将内容进行整合。目前架构在Web 平台上，以HTTP 为基础的Web API的普及，也降低了应用服务整合的门坎。

Google Maps API 是Google 为开发者提供的Maps 编程API。它允许开发者在不必建立自己的地图服务器的情况下，将Google Maps 地图数据嵌入到网站之中，从而实现嵌入Google Maps的地图服务应用，并借助Google Maps 的地图数据为用户提供位置服务。

Google Maps API 除了帮助开发者将地图嵌入到Web 应用中之外，还允许开发者利用JavaScript 脚本进行应用开发拓展，给地图添加标注和折线及其他地图图层覆盖物，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。

通过Google Maps 为开发者提供的地图API，可以开发出各种各样有趣的地图Mash-up 应用，还可以将不同地图图层加载到应用中，如卫星影像、根据海拔高度绘制的高山和植被地形图、街道视图等，从而帮助开发者打造个性化的地图应用站点。

2 通过API Key 调用Google Maps 地图数据

站点在使用Google Maps API 之前，需要申请一个特定的Google Maps 提供的API 钥匙。当然，如果开发者在本地进行开发调试，也可以在不指定钥匙的情况下使用API 来调用Google Maps地图。

目前，来自Google 的地图数据有两种方式的调用形式，分别为Google Maps 和Google 中国的本地地图。由于两者并不是从同一个数据源进行地图调用的，所以API Key 的申请地址也有所区别：

Google Maps API Key 申请地址：http://www.google.com/apis/maps/signup.html

Google 中国本地地图API Key 申请地址：http://www.google.com/intl/zh-CN/apis/maps/

在申请到API Key 之后，需要在调用Google 地图的页面中包含地图调用所需的JavaScript代码，即页面需要包含指向地图数据调用地址的script 标记，并加上你申请的API Key。在下面的script 标记中，将“Your_API_Key”替换为申请好的API Key 即可，页面中的script 标记应该如代码清单8-2 所示：

代码清单8-2

<script src="http://maps.google.com/maps?file=api&v=2&key=Your_API_Key"
type="text/javascript">
</script>

需要注意的是，根据Google Maps API 使用条款的约定：使用Google Maps API 建立的地图应用必须可以让最终用户免费访问，同时，开发者不得替换或遮盖地图上的Google 徽标或属性。目前，在Google Maps API 的支持之下，每个地图API Key 每天可发出最多5 万个地理代码请求，而且对每天使用地图API 生成的页面视图量没有限制。Google Maps 的API 可能会定期更新，如果API 不能向后兼容，则需要在转换期间内及时更新网站，才能使用新版的API 调用Google的地图数据。

3 Google Maps 中使用KML

KML 是由Google 制定的Keyhole 标记语言（Keyhole Markup Language），它采用XML 标准的语法格式，用于描述和保存地理位置信息（如点、线、图像、多边形和模型等内容），也可以直接加载到Google Earth 或Google Maps 中显示。开发者可以使用KML 与其他Google Earth或Google Maps 的用户分享Google 地图上的位置标识。

类似于网页浏览器处理HTML 和XML 文件的方式，Google Earth 和Google Maps 会将KML文件根据其所包含的名称、属性等不同的标签来确定地理位置信息在地图上的显示方式。包含地点名称、描述及位置经纬坐标的简单的KML 代码，示例如代码清单8-3 所示：

代码清单8-3

 <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Placemark>
<name>Place</name>
<description> Simple Place Mark.</description>
<Point> <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>

除KML 之外，Google 还有一种名为KMZ 的文件格式。KMZ 文件以压缩包的形式存储，不仅可以包含KML 格式文本，还可以包含图片等其他类型的文件。

KML 和KMZ 文件都可以从Google Earth 中直接导出，同时，在Google Maps 中使用KML和KMZ 文件的方式十分简单：在Google Maps 的搜索栏中输入KML 文件的地址，然后点击搜索，即可在地图上加载对应位置的地标。

下面我们看一下Google 提供的KML 示例，将下面的KML 地址填入搜索框后点击搜索：http://services.google.com/earth/kmz/EiffelTower.kmz

就可以在Google Maps 上得到著名的巴黎埃菲尔铁塔所在的位置（图无）。

Ruby 的Gem 包GeoRuby（http://georuby.rubyforge.org/）提供地理信息支持，同时也为KML格式提供导入和导出支持。除此之外，GeoRuby 还可以通过PostGIS 或MySQL 数据库的空间拓展模块来读取地理信息数据，以及读写ESRI 的Shape 格式矢量数据。GeoRuby 提供的地理信息功能相当丰富，在使用命令gem install GeoRuby 安装后，就可以借助GeoRuby 提供的功能来进行KML 格式的数据操作。

4 Google Maps 静态地图

为了方便用户使用Google Maps 提供的地图，Google 还提供了一种不必通过JavaScript 调用来实现地图图片调用的方式，即Google Maps 静态地图。通过静态地图提供的功能，用户不需要动态脚本就可以在站点成功添加一幅可以定制的静态地图图片。

Google Maps 提供了一个静态地图的辅助生成器，地址是：http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html。

通过在辅助生成器中指定经纬度、缩放尺度、图片大小、地图类型、标识点位置及调用需要的API_Key 等信息，便可以很轻松地调用所需要的地图图片。比方说，我们输入地图图片的调用位置New York，并指定返回图片的大小，就可以得到一幅相应的地图图片（如图8.7 所示）。填入用户申请的Your_API_Key 之后，静态地图图片对应
的访问地址如下：

http://maps.google.com/staticmap?center=40.757929,-73.985506&markers=40.757929,-73.985506,red&zoom=13&size=500x300&key= Your_API_Key

通过对静态地图的API 调用，可以使传统的电子地图应用扩展到更多领域，也为很多简单的位置服务、定位，提供了更简便直接的方法。

当然，Google Maps 静态地图也有Ruby 的Gem 包static-gmaps，它帮助你实现静态地图的
API 调用：http://static-gmaps.rubyforge.org/可以直接通过命令sudo gem install static-gmaps 来安装使用。

可以直接通过命令sudo gem install static-gmaps 来安装使用。

在ASP.NET中使用Google Maps

http://www.cnblogs.com/lilinqing/archive/2008/07/27/1252770.html

简介

很多人都知道Google Map，其实，Google为我们自己开发应用程序提供了丰富的API，我们只要具备一些JavaScript的知识，就完全可以利用它们。但是，对于我来说，在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度，尤其是利用服务器端函数来动态画出Google Map。例如，我想从SQL Server中读取经纬度信息，然后在Google Map中插入一个点。如果熟悉AJAX的话，很快就能得出答案。我们必须用JavaScript调用ASP.NET服务器端函数，利用得到的数据来绘制Google Map。简单吧？其实，对于我来说并非如此。因此，我决定开发一个用户控件来处理JavaScript代码，这样，我就能集中精力于服务器端函数了。

特点

1.不需要JavaScript知识就能绘制Google Maps，只需在相应页面加入自定义控件即可。

2.使用AJAX调用来获取服务器端数据。

3.提供最优越的性能表现。

如何使用

在这里，我并不想解释我是如何创建该控件的。我只要教你如何使用它。

系统需求

1.Visual Studio 2005或更高版本

2.Microsoft ASP.NET AJAX Extensions支持

3.Internet Explorer 7.0或Mozilla Firefox 2.x

你只需完成以下几步：

1.新建一个ASP.NET AJAX-Enabled Website。

2.将源代码中App_Code文件夹、GoogleMapForASPNet.ascx、GoogleMapForASPNet.ascx.cs，GService.asmx复制到你的ASP.NET应用程序下。

3.保证你的网站支持AJAX技术。

4.打开Default.aspx（或任何你想加入Google Map的位置），将该自定义控件拖放至相应位置并编译，这样就实现了最简单的带有Google Map的ASP.NET网页。

现在我们来为Google Map加一些标注点。在Page_Load()事件中加入一些代码。

向Google Map控件传参

注意：使用时必须首先设定你的Google Maps API key（可以从Google免费获取）。

以下是代码：

if (!IsPostBack)
{
GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>"; //定义你的Google Maps API key

GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2"; //选择Google Maps API版本

GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
GoogleMapForASPNet1.GoogleMapObject.Height = "600px"; //定义Google Map控件的大小

GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14; //定义缩放级别，默认值为3

GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 31.19, 120.37); //定义地图中心位置

GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 31.19, 120.37)); //在指定经纬度定义新的地图标注点

}

这样，就能自定义地图加载位置和标注点了。

自定义标注点图标

该控件支持自定义标注点图标。首先，将图标文件复制到你的网站目录下，接着，使用以下赋值语句：

GP.IconImage = "icons/pushpin-blue.png";

还可以为标注点添加注释，当用户单击标注点时，能看到注释内容。代码：

GP.InfoHTML = "这是一个标注点";

至此，已经介绍了使用Google Maps Control的基本内容。接下来，我们来看一下它的高级功能。例如，当用户进行某些操作时移动标注点。

创建交互式地图

该控件支持用户创建交互式地图。下面这个例子是，当用户单击按钮时，移动标注点。以下是使用方法：

1.插入一个Button控件，在它的Click事件中加入以下代码：

     protected void Button1_Click(object sender, EventArgs e)
     {
           GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;
           GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;
     }

可以自主控制经纬度的增量。

2.运行该页面，你将发现整个页面都会被刷新或回传。为了避免这种现象，我们只需要把这个Button控件加入UpdatePanel控件中。

3.重新运行该页面，可看到该页面已经一切正常了。

自动更新和GPS导航

我们可以使用AJAX框架中的Timer控件来实现这一功能。在Timer_Tick()事件中，可以定义标注点新的经度和纬度。这样，在指定的时间间隔后，地图上所有的标注点都会自动更新。你也可以连接到GPS设备，构成一个GPS导航系统。

使用Google Maps Control绘制折线

1.首先，添加该折线的各个端点。代码如下：

     GooglePoint GP1 = new GooglePoint();
     GP1.ID = "GP1";
     GP1.Latitude = 31.19;               //定义标注点纬度
     GP1.Longitude = 120.37;          //定义标注点纬度
     GP1.InfoHTML = "这是标注点1";     //可选注释项
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1);          //在地图上添加这个点

     GooglePoint GP2 = new GooglePoint();
     GP2.ID = "GP2";
     GP2.Latitude = 31.19001;
     GP2.Longitude = 120.37001;
     GP2.InfoHTML = "这是标注点2";
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);

     GooglePoint GP3 = new GooglePoint();
     GP3.ID = "GP3";
     GP3.Latitude = 31.19003;
     GP3.Longitude = 120.36998;
     GP3.InfoHTML = "这是标注点3";
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);

2.利用这些点绘制折线

     GooglePolyline PL1 = new GooglePolyline();     //定义折线
     PL1.ID = "PL1";
     PL1.ColorCode = "#0000FF";               //定义折线颜色
     PL1.Width = 5;                    //定义折线宽度

     PL1.Points.Add(GP1);          //加入这些点（绘制折线）
     PL1.Points.Add(GP2);
     PL1.Points.Add(GP3);

3.将折线加入Google Maps Control中

GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);

使用Google Maps Control绘制多边形

1.按照上面的方法加入多边形各顶点。这里不再赘述。

2.使用这些点创建一个多边形。代码如下：

     GooglePolygon PG1 = new GooglePolygon();          //定义多边形
     PG1.ID = "PG1";
     PG1.FillColor = "#0000FF";               //定义多边形各条边的颜色
     PG1.FillOpacity = 0.4;

     PG1.Points.Add(GP1);               //将上面创建的各点加入多边形（作为顶点）
     PG1.Points.Add(GP2);
     PG1.Points.Add(GP3);
     ……………………………………

PG1.Points.Add(GPn); //第n个顶点

3.将多边形加入Google Maps Control中

GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

附上源代码：点击下载