nullGoogle 地图 APIGoogle 地图 API谷歌地图应用说明
Michael-Tian内容概述内容概述基础知识
正向标注
反向标注
任意多边形
自定义GMarker
地图控件与地图属性
空间数据类型
参考资料
Demo
基础知识基础知识Google 地图 API 概念
Google 地图的“Hello, World”
加载 Google 地图 API
地图 DOM 元素
GMap2 - 基本对象
初始化地图
加载地图基础知识基础知识什么是 Google 地图 API？
Google 地图 API是一种通过 JavaScript 将 Google 地图嵌入到您的网页的API。它提供了很多处理地图的功能（类似网页 http://ditu.google.cn 上的那些功能）和向地图添加内容的服务，让您能够在您的网站上创建功能全面的地图应用。
任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。基础知识基础知识Google 地图的“Hello, World”
开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。
显示例图
显示代码
基础知识基础知识基础知识基础知识
Google Maps JavaScript API Example
基础知识基础知识加载 Google 地图 API当地图发布时，必须使用发布地图的网址来注册API，同时sensor 参数也必须明确指明true 或 false，否则地图不能被加载。
基础知识基础知识地图 DOM 元素要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。
在上述示例中，我们定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。
基础知识基础知识GMap2 - 基本对象GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaScript new 操作符创建此类的一个新实例。
基础知识基础知识初始化地图初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。基础知识基础知识加载地图onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。
GUnload() 函数是用来防止内存泄漏的实用工具函数。正向标注正向标注Map2类
谷歌可视化API
GClientGeocoder 类
GMarker 类
GLatLng 类
函数 GDownloadUrl
可拖动的标记
手动标注
自动标注
随机生成
读XML文件正向标注正向标注Map2类
对 GMap2 类进行实例化以创建地图。这是 API 中的中心类。其他都是辅助类。正向标注正向标注谷歌可视化API
Google 可视化 API 使您可以访问您可以显示的结构化数据的多个源（从大范围可视化选择范围内选择）。Google 可视化 API 还提供了一个可以用来创建、共享和重复使用开发人员社区详细编写的可视化内容的平台。
DataTable：该DataTable对象是用来保存到一个可视化传递的数据。DataTable是一个基本的二维表。每一列的所有数据必须具有相同的数据类型。正向标注正向标注GClientGeocoder 类
此类用于和 Google 服务器建立直接通信，以获取用户指定地址的地址解析。
getLocations(query:String|GLatLng, callback:function) 正向标注正向标注GMarker 类
GMarker 标记地图上的位置。它实现 GOverlay 接口，因此可使用 GMap2.addOverlay() 方法添加到地图中。
默认图标：正向标注正向标注GLatLng 类
GLatLng 是以经度和纬度表示的地理坐标点。
请注意，尽管进行地图投影时通常将经度与 x 坐标相关联，将纬度与 y 坐标相关联，但总是先填写纬度坐标，后填写经度坐标，因为这符合绘图习惯。正向标注正向标注函数 GDownloadUrl
此函数提供一种便利方式，可异步检索按网址标识的资源。请注意，由于 XmlHttpRequest 对象用于执行请求，因此它受跨站脚本的同源限制，即网址必须指向与当前执行此代码的文档的网址相同的服务器。因此，对 url 参数使用绝对网址通常是多余的，最好仅使用绝对或相对路径。处理抛出的任何异常（如安全错误）都是调用者的职责。正向标注正向标注可拖动的标记
标记是可以点击和拖动到新位置的交互式对象。
默认情况下，标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。
var marker = new GMarker(center, {draggable: true});正向标注正向标注手动标注
左键单击地图添加标记，并取得当前标记的坐标，然后将信息添加到一个列表中，这个列表使用了谷歌可视化技术；最后为地图添加一个事件侦听器，取得坐标的详细信息。
首先创建一个数据表
var visualization = new google.visualization.Table(document.getElementById(‘table_canvas’));
为地图添加一个单击事件侦听
GEvent.addListener(map, 'click', function(overlay, latlng)正向标注正向标注自动标注-随机生成
通过随机生成经纬坐标来实现。for (var i = 0; i < 10; i++)
{
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
正向标注正向标注自动标注-读XML文件
读取XML文件需要用到GdownloadUrl函数，使用它来读取XML文件中的
节点来取得标记的坐标。
显示代码正向标注正向标注GDownloadUrl("XML/data.xml", function(data, responseCode)
{
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point, { draggable: true } ));
}
});反向标注反向标注从Marker到列表
从列表到Marker
显示例图反向标注反向标注从Marker到列表
当选中Marker时，对应的列表行将会被选中，颜色会改变，这里称之为“行选中状态”，要实现此功能需要给标注点添加一个click事件侦听，然后调用visualization.setSelection方法。GEvent.addListener(marker, "click", function()
{
var selectRow = marker.title – 1;
visualization.setSelection([{ 'row': selectRow}]);
});反向标注反向标注从列表到Marker
要实现点击列表的某一行，行对应的Marker提示信息，需要为列表添加一个事件侦听器，来响应列表行的选中事件，行选中状态时，被选中行的颜色会改变到Marker反向标注反向标注任意多边形任意多边形GPolyline 类
GLatLngBounds 类
矩形选择
可调的多边形
样式设置
顶点数据获取
不可调的多边形任意多边形任意多边形GPolyline 类
这是一种使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层，或者是来自 Google 服务器的图像叠加层。任意多边形任意多边形GLatLngBounds 类
GLatLngBounds 实例在地理坐标中代表矩形，包括与 180 度子午线相交的矩形。任意多边形任意多边形矩形选择
在地图上绘制一个矩形，在结束绘制时（mouseup事件）将包含在矩形内的所有坐标点显示出来，然后将地图平移到矩形的中心位置。使用GLatLngBounds类的containsLatLng方法判断坐标点是否在矩形内。
显示例图任意多边形任意多边形任意多边形任意多边形可调的多边形－样式设置
使用Gpolyline类向地图添加多边形，使用Gpolyline绘制多边形的原理是向地图添加N个坐标点，N >=3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。如果想让多边形变成可调整状态，需要添加一个方法enableEditing。
显示图例任意多边形任意多边形任意多边形任意多边形可调的多边形－顶点数据获取
通过polygon.getVertexCount()方法取得多边形的顶点总数，然后循环调用polygon.getVertex()方法取得每个顶点的经纬坐标值。
任意多边形任意多边形不可调的多边形
不可调的多边形创建方法与可调多边形是一样的，只是却掉polygon.enableEditing() 属性即可。
显示例图任意多边形任意多边形自定义GMarker自定义GMarkerGMarker添加文字
添加滑动门效果
自定义图片无效果自定义GMarker自定义GMarkerGMarker添加文字
想为GMarker添加文字，就需要定义一个新的类，这个类继承GMarker，然后在这个新类中添加一个DIV，DIV.innerHTML的值就是用来显示GMarker上面的文字。
显示例图自定义GMarker自定义GMarker自定义GMarker自定义GMarker添加滑动门效果
这里要实现的滑动门效果就是当鼠标移动到标记上，图标会向右展开来显示里面的内容，当鼠标离开标记时，标记会向左缩进，回复原来的样子。实现这种效果用到的技术是DIV+CSS。
原理
为标记添加 mouseover、mouseout事件。
mouseover时，将DIV的display属性设置为空。
mouseout时，将DIV的display属性设置为none。
显示例图自定义GMarker自定义GMarker自定义GMarker自定义GMarker自定义图片无效果
最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标（比如 G_DEFAULT_ICON，将其作为 GIcon 的 copy 参数），它将复制该图标所有的默认属性，然后您可以对其进行自定义。
显示例图自定义GMarker自定义GMarker地图控件与地图属性地图控件与地图属性控件概述
http://ditu.google.cn 上的地图包含允许用户与地图交互的 UI 元素，这些元素称为“控件”。
GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。
GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。
GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。
GScaleControl - 地图比例尺
GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮
GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。
GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
空间数据类型空间数据类型SQL Server 2008 支持用于存储空间数据的 geometry 和 geography 数据类型。这些类型支持用来创建、比较、分析和检索空间数据的方法和属性。
geometry 数据类型支持平面或欧几里得（平面球）数据。geometry 数据类型符合适用于 SQL 规范的开放地理空间联盟 (OGC) 简单特征 1.1.0 版。
geography 数据类型，该数据类型可存储诸如 GPS 纬度和经度坐标之类的椭圆体（圆球）数据。
geometry 和 geography 数据类型支持十一种空间数据对象或实例类型。 可实例化类型以蓝色表示。 参考资料参考资料DemoDemoDemo nullThank you
浙公网安备 33021202002483