相关文章
北京网页设计百度更新数据居然人为控制
北京网站设计忍了很久，说说对百度的看法
北京网页设计SEO在中国还能够走多久
网页设计是SEO垃圾机器人还是教育专家？
北京网站制作新站怎样才不容易被百度K掉
网站建设不用SEO取得成功的10个步骤
网站建设新站如何应付百度
网站制作SEO网站优化在企业中应该处于什么位置？
企通互联SITE能让你对站点了解多少？
网站建设50个影响网站排名的因素
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> seo >> www.qitongnet.com北京网页设计google maps api document 中文翻译
www.qitongnet.com北京网页设计google maps api document 中文翻译
作者： 北京网站建设 日期：2008-03-27 05:59:40 来源： http://www.qitongnet.com
google maps api document 中文翻译- -网页设计
Tag： API,MAPS,GOOGLE 北京网站设计
Google Maps API 北京网页设计
可以让你在你自己的网页上嵌入google地图。要使用这个API,你需要上这里去 网页设计
http://www.google.com/apis/maps/signup.htm 网站设计
申请一个API key 并按照下面的说明来做。 北京网站设计
网页设计
网站设计
这个API是新的，所以以完美的文档的要求来说，它可能会有一些小错误。容忍我们，我们将填补这些漏洞，您可以参加这个 北京网站设计
Google Maps API 中文讨论区 北京网站设计
http://groups.google.com/group/Goolgle-Map-Chinese 网站制作
地图讨论组来反馈您的问题并讨论这个API。 网站制作
正文如下： 北京网页设计
介绍： 北京网站建设
Google Maps的"helloword"程序 网站制作
浏览器的选择 网站制作
XHTML和VML 企通互联
API更新 北京网站制作
地理编码，路径选择等 企通互联
例子： 网页设计
最基本的 北京网页设计
地图移动和动画 北京网站建设
向地图中添加控件 北京网站设计
事件监听 网站制作
打开一个属性窗口 北京网站制作
地图叠置 网站制作
单击操作 网站建设
在标记上的窗口显示信息 企通互联
创建图标 北京网站制作
使用图标类 网站制作
在地图上使用XML和异步传输RPC（"AJAX"） 企通互联
API 总览 北京网站制作
GMap 类（the GMap class） 企通互联
事件 （Event） 北京网站制作
信息窗口（the info window） 企通互联
叠置（Overlays） 北京网站建设
图标和标记（Icons and Markers） 企通互联
折线（Polylines） 网站建设
控件（Controls） 北京网页设计
XML 和 RPC 网站设计
类参考 北京网页设计
GMap 网站建设
* Constructor 企通互联
* Methods 北京网页设计
* Configuration 网站建设
* Controls 北京网站制作
* State 企通互联
* Overlays 北京网站设计
* Info Window 企通互联
* Event 北京网站设计
北京网页设计
北京网页设计
GMarker 网站建设
* Constructor 北京网页设计
* Methods 网站建设
* Events 北京网页设计
GPloyLine 企通互联
* Constructor 北京网站设计
网站制作
北京网站制作
GIcon 北京网站建设
* Constructor 网站建设
* Properties 北京网站设计
网站建设
网站制作
GEvent 网页设计
* Static Methods 北京网页设计
北京网页设计
网站建设
GXmlHttp 企通互联
* Static Methods 北京网站制作
企通互联
企通互联
GXml 北京网站制作
* Static Methods 北京网站制作
GXslt 网页设计
* Static Methods 网站制作
* Methods 网页设计
网站设计
网站设计
GPoint 企通互联
* Constructor 企通互联
* Properties 北京网站设计
北京网站制作
网页设计
GSize 北京网站建设
* Constructor 网站制作
* Propertes 网站制作
GBounds 北京网站建设
* Constructor 北京网站建设
* Properties 网站建设
简介： 网站制作
Google Maps 的"hello world"实例 网站建设
北京网站设计
网页设计
最简单的开始学习这个API的方法是看一个简单的例子。。这个网页显示了以Palo 北京网站建设
网站制作
网站建设
Alto为中心的一个300×300的地图 北京网站设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 网站制作
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 企通互联
<html xmlns="http://www.w3.org/1999/xhtml"> 北京网站设计
<head> 北京网站设计
<title>Google Maps JavaScript API Example - simple</title> 网站制作
<script 网站建设
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 北京网站建设
北京网站建设
北京网站制作
</head> 北京网站设计
<body> 网站建设
<div id="map" style="width: 300px; height: 300px"></div> 北京网页设计
<script type="text/javascript"> 北京网站建设
//<![CDATA[ 北京网页设计
if (GBrowserIsCompatible()) { 北京网站建设网站建设
var map = new GMap(document.getElementById("map")); 企通互联
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站设计
} 北京网站建设
//]]> 网站设计
</script> 网站制作
</body> 北京网站制作
</html> 北京网站设计
你可以把这个例子下载下来并编辑和测试它，但是你需要将"abcdefg"替换成你自己的Maps 企通互联
网页设计
北京网页设计
API key，让这个例子能在你自己的网站上运行。 北京网站设计
正如你在上面的例子中所看到的，Google 北京网站建设
Maps引入了一个简单的javascript 北京网站制作
url（http://maps.google.com/maps?file=api&v=1）,这个url包含了所有的在你的网页上创建地图的所需要的标记和符号。要使用Google 网站制作
网站建设
北京网页设计
Maps 网站建设
Api，你需要去创建一个简单的script标记来指向这个url，当然要加上你从google那里申请来的这个API的key。 北京网页设计
网页设计
网站制作
<script 网页设计
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 网站设计
网页设计
网站制作
Google Maps 北京网页设计
API输出的最主要的类是GMap类，它表现了一个网页上的简单的地图。你可以创建更多的这个类的实例（每个实例来表网页上的一个地图）。地图被嵌入到一个容器­-中，一般是一个div元素。 网站制作
北京网站建设
北京网站设计
操纵和叠置图层到地图实例的方法会在下面详细介绍。 北京网站制作
网页设计
网页设计
浏览器兼容性 北京网页设计
Google Maps并不对所有的浏览器兼容。现在Google 企通互联
Maps支持的浏览器版本有Firefox/Mozilla,IE5.5以上版本，Safari1.2以上版本部分支持Opera。它不支持IE5.0。由于不­-同的应用要求用户对不同的浏览器作不同的操作，Maps 网站建设
企通互联
网页设计
API提供了一个globle 企通互联
方法（GBrowserIsCompatible（））来检查兼容性，但是它没有任何自动的针对不同浏览器的行为。 企通互联
北京网页设计
网站建设
脚本http://maps.google.com/maps?file=api&v=1将在几乎所有的浏览器上被正确解析，所以你可以在检查兼容性之前安全地将这个脚本引入进来。 网站建设
网站设计
网页设计
除了上面的例子检测了兼容性外，本文档中的所有例子都没有检测兼容性，对于老的浏览器，他们也不会提示任何信息。显然，真正的应用中应该将事情做得更好，但是我­-们忽略了这些检查来让我们的例子更容易读。 北京网页设计
网站设计
网站建设
XHTML 和 VML 网站设计
我们推荐您再包含地图的网页上使用符合标准的XHTML。当浏览器检测到在页首的DOCTYPE标签时，它们将使用符合标准的模式来执行你的网页，这样可以使得­-在不同的浏览器上的布局和行为更加的可预料一些。 网站建设
企通互联
网站制作
同样的，如果你在你的地图上要包含PLOYLINE，对于IE浏览器你需要在你的XHTML文档中引入VML名称空间。你的HTML文档应该这样开始： 网站制作
网页设计
网站制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 网站设计
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 北京网站制作北京网页设计
<html 网站建设
xmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml"> 北京网站设计
网站设计
北京网站建设
<head> 北京网页设计
<style type="text/css"> 网站制作
v\:* { 北京网站设计
behavior:url(#default#VML); 网站建设
} 北京网站设计
</style> 网页设计
<script 网站制作
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 网页设计
企通互联
北京网站建设
</head> 北京网站建设
查看Microsoft VML workshop可以得到更多信息。 企通互联
API 的更新 网站设计
URl 网站制作
http://maps.google.com/maps?file=api&v=1代表API的'1.0'版本。当我们要对这个API作出重大更新的时候，我们将增加版本号并在GOOGLE 北京网页设计
网站设计
网站设计
CODE和MAP API讨论组发表通告。 企通互联
我们将尝试同时运行新版本和旧版本，一个月后，老的版本就会被停用。 北京网页设计
网页设计
北京网站制作
Maps团队将透明地更新API，包括增强它地性能，修复它的bugs。这些bugs修复工作只是为了提高性能和填补漏洞，但是我们可能会不经意地破坏一些AP­-I客户，请在Maps 北京网站制作
网站制作
北京网页设计
API讨论组中报告这些情况。 北京网页设计
地理编码，路径，等等 北京网站制作
Google Maps 北京网站建设
API还没有包含地理编码和路由服务，但网罗上有很多的免费的地理编码。 北京网页设计
网页设计
网站制作
示例： 北京网站制作
the basics 北京网页设计
创建一副地图并将其中心定位在Palo Alto； 网站制作
var map = new GMap(document.getElementById("map")); 网页设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站建设
map movement and animation 北京网站制作
网页设计
网页设计
recenterOrPanToLatLng方法进行一个持续的漫游，如果经纬度范围不在当前的地图窗口中的话，另外它还可以进行一个离散的移动。 北京网页设计
网页设计
北京网站建设
var map = new GMap(document.getElementById("map")); 网站设计
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); 网站建设
window.setTimeout(function() { 北京网站设计
map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569)); 北京网站建设
}, 2000); 网站制作
Adding Controls to the Map 企通互联
北京网页设计
北京网站建设
你可以使用addControl方法往地图上添加控件。在这个例子中，我们添加了GSmallMapControl和GMapTypeControl，折使得我­-们能够缩放，漫游地图并在地图和卫星影像之间做切换。 网站建设
北京网站建设
网站制作
var map = new GMap(document.getElementById("map")); 北京网站设计
map.addControl(new GSmallMapControl()); 网站建设
map.addControl(new GMapTypeControl()); 北京网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站设计
Event Listeners 网站设计
网站制作
网页设计
事件监听器在GEvent.addListener方法中注册。在这个例子中，在用户将地图移动或者拖动以后，我们会返回地图的中间的经纬度坐标。 企通互联
网站设计
网页设计
var map = new GMap(document.getElementById("map")); 北京网页设计
GEvent.addListener(map, "moveend", function() { 网页设计
var center = map.getCenterLatLng(); 网页设计
var latLngStr = '(' + center.y + ', ' + center.x + ')'; 网站设计
document.getElementById("message").innerHTML = latLngStr; 企通互联
}); 网站建设
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 企通互联
打开一个消息窗口 北京网站设计(opening an info window) 网站制作
显示一个指向地图中间的"hello 网站制作
world"信息窗口。信息窗口一般的会在标签上方被打开,但是他们也可以在地图的任何地方被打开。 网站建设
网页设计
企通互联
var map = new GMap(document.getElementById("map")); 北京网站设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站制作
map.openInfoWindow(map.getCenterLatLng(), 北京网站设计
document.createTextNode("Hello world")); 北京网站设计
地图叠加(Map Overlays) 北京网站设计
创建了十个随机的标记和一个随机的折线来展示map 网站制作
overlays的用途 北京网站制作
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 网站设计
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 北京网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站设计
// Add 10 random markers in the map viewport using the default icon 网站建设
var bounds = map.getBoundsLatLng(); 网站制作
var width = bounds.maxX - bounds.minX; 企通互联
var height = bounds.maxY - bounds.minY; 企通互联
for (var i = 0; i < 10; i++) { 网页设计
var point = new GPoint(bounds.minX + width * Math.random(), 网站建设
bounds.minY + height * Math.random()); 网页设计
var marker = new GMarker(point); 北京网站设计
map.addOverlay(marker); 网页设计
网页设计
网页设计
网页设计
} 网页设计
网站建设
网页设计
// Add a polyline with 4 random points. Sort the points by longitude so 企通互联
企通互联
that 北京网页设计
// the line does not intersect itself. 网站制作
var points = []; 企通互联
for (var i = 0; i < 5; i++) { 北京网站建设
points.push(new GPoint(bounds.minX + width * Math.random(), 北京网页设计
bounds.minY + height * Math.random())); 北京网站建设
网站制作
企通互联
网站建设
} 北京网站制作
北京网站制作
企通互联
points.sort(function(p1, p2) { return p1.x - p2.x; }); 北京网站建设
map.addOverlay(new GPolyline(points)); 北京网站制作
单击操作(Click Handling). 网站建设
网站设计
当你点击地图的时候，你往那个点上面添加了一个标记。当你再次点击这个点的时候，你将这个点从地图上抹掉了。 北京网站设计
企通互联
网站制作
var map = new GMap(document.getElementById("map")); 企通互联
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 网站建设
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站建设
GEvent.addListener(map, 'click', function(overlay, point) { 企通互联
if (overlay) { 北京网站设计
map.removeOverlay(overlay); 网站建设
} else if (point) { 网站建设
map.addOverlay(new GMarker(point)); 网页设计
} 网站建设
企通互联
北京网站建设
北京网站制作
}); 网站建设
北京网页设计
北京网站制作
在标记上显示消息窗口(Display Info windows Above Markers) 网页设计
在这个示例中，我们通过监听对每个标记的单击事件来显示一个定义的消息窗口，我们使用了关闭窗口的功能来对每个窗口的内容进行用户化的定制。 网站制作
北京网站制作
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 网站设计
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 北京网站设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站制作
// Creates a marker whose info window displays the given number 网站设计
function createMarker(point, number) { 北京网站制作
var marker = new GMarker(point); 网页设计
// Show this marker's index in the info window when it is clicked 网站建设
var html = "Marker #<b>" + number + "</b>"; 企通互联
GEvent.addListener(marker, "click", function() { 北京网站建设
marker.openInfoWindowHtml(html); 网站建设
}); 网站建设
return marker; 网站建设
网站设计
网站设计
网站制作
} 北京网站建设
网页设计
网站制作
// Add 10 random markers in the map viewport 北京网站制作
var bounds = map.getBoundsLatLng(); 网站设计
var width = bounds.maxX - bounds.minX; 网站设计
var height = bounds.maxY - bounds.minY; 网站建设
for (var i = 0; i < 10; i++) { 企通互联
var point = new GPoint(bounds.minX + width * Math.random(), 北京网站设计
bounds.minY + height * Math.random()); 北京网站设计
var marker = createMarker(point, i + 1); 网页设计
map.addOverlay(marker); 网页设计
北京网站制作
北京网站设计
} 北京网站设计
北京网站建设
网页设计
创建图标 北京网页设计
创建一个新类型的图标，使用在Google Ride 企通互联
Finder中的"mimi"标记作为例子。我们需要制定 网站设计
这个图像的前景图像，阴影图像,以及我们想要将这些图标放在地图上的位置和和这些图标相对应的 网站建设
北京网站设计
信息窗口。 北京网站建设
// Create our "tiny" marker icon 网页设计
var icon = new GIcon(); 网站设计
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 网站建设
icon.shadow = 网站设计
"http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 网站制作
icon.iconSize = new GSize(12, 20); 北京网站制作
icon.shadowSize = new GSize(22, 20); 北京网页设计
icon.iconAnchor = new GPoint(6, 20); 网站建设
icon.infoWindowAnchor = new GPoint(5, 1); 北京网站设计
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 北京网页设计
map.addControl(new GSmallMapControl()); 网站建设
map.addControl(new GMapTypeControl()); 网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站制作
// Creates one of our tiny markers at the given point 网站制作
function createMarker(point) { 网页设计
var marker = new GMarker(point, icon); 北京网站建设
map.addOverlay(marker); 网站制作
GEvent.addListener(marker, "click", function() { 北京网站设计
marker.openInfoWindowHtml("You clicked me!"); 北京网页设计
}); 网页设计
北京网页设计
网站设计
网站设计
} 北京网站制作
网站设计
网页设计
// Place the icons randomly in the map viewport 网站设计
var bounds = map.getBoundsLatLng(); 北京网页设计
var width = bounds.maxX - bounds.minX; 网站制作
var height = bounds.maxY - bounds.minY; 北京网站制作
for (var i = 0; i < 10; i++) { 北京网站制作
createMarker(new GPoint(bounds.minX + width * Math.random(), 网站设计
bounds.minY + height * Math.random())); 网站制作
网页设计
网站设计
} 北京网站设计
网站制作
网页设计
使用图标类(Using Icon Classes) 网站制作
网页设计
在很多种情况下，你的图标也许会有相同的前景色，但可能有不同的形状和阴影。最简单的达到 网站建设
网站建设
北京网页设计
这种效果的方法是使用GIcon 北京网站建设
类的拷贝，这些拷贝将你所要定义的图标属性都拷贝到一个你所定义的 网站设计
网页设计
网站设计
新的图标上去。 北京网站建设
// Create a base icon for all of our markers that specifies the shadow, 网站建设
网站设计
网站设计
icon 网站制作
// dimensions, etc. 网站制作
var baseIcon = new GIcon(); 北京网站制作
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 企通互联
baseIcon.iconSize = new GSize(20, 34); 北京网页设计
baseIcon.shadowSize = new GSize(37, 34); 北京网站建设
baseIcon.iconAnchor = new GPoint(9, 34); 北京网站设计
baseIcon.infoWindowAnchor = new GPoint(9, 2); 北京网站设计
baseIcon.infoShadowAnchor = new GPoint(18, 25); 企通互联
// Center the map on Palo Alto 北京网站建设
var map = new GMap(document.getElementById("map")); 网站制作
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 企通互联
// Creates a marker whose info window displays the letter corresponding 网页设计
北京网页设计
网站制作
to 企通互联
// the given index 网站建设
function createMarker(point, index) { 网站建设
// Create a lettered icon for this point using our icon class from 网页设计
above 北京网页设计
var letter = String.fromCharCode("A".charCodeAt(0) + index); 北京网站制作
var icon = new GIcon(baseIcon); 网站建设
icon.image = "http://www.google.com/mapfiles/marker" + letter + 网站制作
".png"; 北京网站制作
var marker = new GMarker(point, icon); 北京网站制作
// Show this marker's index in the info window when it is clicked 网站制作
var html = "Marker <b>" + letter + "</b>"; 企通互联
GEvent.addListener(marker, "click", function() { 企通互联
marker.openInfoWindowHtml(html); 北京网站设计
}); 北京网站建设
return marker; 北京网站制作
网站建设
网页设计
北京网站制作
} 北京网站制作
北京网站设计
网站制作
// Add 10 random markers in the map viewport 网站建设
var bounds = map.getBoundsLatLng(); 网页设计
var width = bounds.maxX - bounds.minX; 企通互联
var height = bounds.maxY - bounds.minY; 网页设计
for (var i = 0; i < 10; i++) { 网页设计
var point = new GPoint(bounds.minX + width * Math.random(), 网站建设
bounds.minY + height * Math.random()); 北京网站设计
var marker = createMarker(point, i); 网站建设
map.addOverlay(marker); 北京网站制作
网站制作
网站制作
} 网站设计
北京网页设计
网站制作
在地图上使用XML和异步远程方法调用Using XML and 网站建设
Asynchronous RPC('AJAX') 北京网页设计
在这个例子中，我们下载了一个静态文件"data.xml"，这个文件包含有一系列以XML存储的经纬度坐标。当下载完成后，我们解析这个XML文件并在每个经­-纬度交汇处，创建一个图标。 北京网站制作
网页设计
// Center the map on Palo Alto 网站制作
var map = new GMap(document.getElementById("map")); 北京网站建设
map.addControl(new GSmallMapControl()); 北京网站建设
map.addControl(new GMapTypeControl()); 网页设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站设计
// Download the data in data.xml and load it on the map. The format we 北京网站制作
// expect is: 网站建设
// <markers> 北京网站制作
// <marker lat="37.441" lng="-122.141"/> 北京网站制作
// <marker lat="37.322" lng="-121.213"/> 企通互联
// </markers> 企通互联
var request = GXmlHttp.create(); 北京网页设计
request.open("GET", "data.xml", true); 网页设计
request.onreadystatechange = function() { 北京网站设计
if (request.readyState == 4) { 北京网站建设
var xmlDoc = request.responseXML; 北京网站设计
var markers = 网页设计
xmlDoc.documentElement.getElementsByTagName("marker"); 网站制作
for (var i = 0; i < markers.length; i++) { 企通互联
var point = new 北京网站设计
GPoint(parseFloat(markers[i].getAttribute("lng")), 北京网页设计
网站建设
企通互联
parseFloat(markers[i].getAttribute("lat"))); 北京网站制作
var marker = new GMarker(point); 网站建设
map.addOverlay(marker); 北京网站建设
} 北京网页设计
} 企通互联
北京网站建设
网站设计
网站制作
} 北京网页设计
北京网站设计
网页设计
request.send(null); 网站设计
网站制作
API 总览 北京网站设计
GMap 类 北京网页设计
GMap类的一个实例代表网页上的一个简单的地图。你可以为这个实例创建很多实例（这个网页上有多少地图，你就可以创建多少个）。一个地图被包含再一个容器中，­-一般来说是一个DIV元素。如果你没有明确地指出地图的尺寸，地图将会使用容器的大小来决定其大小。 北京网页设计
网站建设
北京网站建设
GMap类提供一些方法来控制地图的空间位置（指定中心和缩放程度）和在地图上添加和移除叠加图层(overlays).它还提供了打开一个"消息窗口"的方法­-，这个"消息窗口"就是你再Google 企通互联
北京网站制作
网页设计
Maps和Google 网页设计
Local中所看到的。一个地图只有一个简单的消息窗口，所以在一个指定时间你只能看到一个窗口。 网页设计
网站建设
网页设计
Event 网站制作
北京网站制作
网页设计
你可以使用Event监听器往你的应用中动态地添加元素。一个对象提供了很多被命名的事件(Event),你的应用可以使用静态方法GEvent.addLis­-tener或者GEvent.bind监听这些事件。例如，下面的代码片断就在用户点击地图窗口时显示一个警告信息。 北京网站设计
北京网站制作
北京网页设计
var map = new GMap(document.getElementById("map")); 北京网页设计
GEvent.addListener(map, "click", function() { 网站制作
alert("You clicked the map"); 北京网站设计
北京网站设计
网站制作
北京网站建设
}); 北京网页设计北京网站设计
网站设计
北京网页设计
GEvent.addListener方法作为一个第三参数的函数存在，这个方法的使用需要引用一个事件处理函数在里面。如果你像要对一个方法类绑定一个事件，­-你可以使用GEvent.bind。例如： 网站建设 网站建设
北京网站建设
function MyApplication() { 网站制作
this.counter = 0; 网站设计
this.map = new GMap(document.getElementById("map")); 北京网站建设
GEvent.bind(this.map, "click", this, this.onMapClick); 北京网站设计
北京网页设计
网站建设
网站制作
} 网站设计
网站设计
北京网站设计
MyApplication.prototype.onMapClick() { 北京网站建设
this.counter++; 网站设计
alert("You have clicked the map " + this.counter + 网站设计
this.counter == 1 ?" time.":" times."); 企通互联
网站设计
北京网站设计
} 北京网站设计
北京网站设计
网站建设
var application = new MyApplication(); 北京网页设计
北京网站建设
消息窗口(the info window). 北京网站制作
Map 网页设计
类有一个简单的"消息窗口"，可以在地图上方的浮动窗口内显示HTML内容。 网站制作
网站建设
北京网站设计
最基本的"消息窗口"方法时openInfoWindow，这个方法使用一个点和一个HTML中的Dom元素作为参数。HTML 北京网站制作
北京网站制作
网页设计
DOM元素被添加在消息窗口容器之后，消息窗口会显示在这个点上方。 北京网页设计
网站制作
北京网站设计
openInfoWindowHtml也很相似，但是它以一个HTML字符串作为一个参数而不是一个DOM元素。 北京网站设计
北京网站制作
网站制作
openInfoWindowsXslt以一个XML 网站建设
DOM元素以及XSLT文档的URL来产生窗口内容，如果用户的浏览器没有下载下来的话，将异步地下载XSLT。 网站制作
网站建设
企通互联
要在一个叠置图层（例如一个标记）上显示消息窗口，你可以通过一个可选的第三参数指定消息窗口 企通互联
北京网站设计
北京网站设计
位置和你所指定的点之间的偏移量。例如，如果你的标记有10个象素高，你可以设置该象素便宜为GSize(0,-10). 北京网站设计
北京网页设计
网页设计
GMarker类提供openInfoWindow方法来为你处理图标的大小和形状产生的象素偏移，所以你一般不需要为计算你应用中的图标偏移而担心。 网站建设
企通互联
北京网站制作
叠置图层(Overlays) 北京网站建设
叠置图层（似乎应该翻译为叠加物更为妥当）时在地图上的和经纬度坐标绑定的对象，所以它们会随 网站建设
北京网站设计
网站制作
着你拖动/缩放或者变换地图投影的时候(例如变换地图模式到卫星模式的时候)。 北京网页设计
北京网站制作
网站制作
Maps 企通互联
API提供了两种类型的叠加物，一种是标记，他们是地图上的图标，另外一种是折线，他们是通 北京网站设计
网站建设
网站制作
过经纬度坐标构成的。 网站设计
北京网站建设
网页设计
图标和标记 北京网站建设
GMarker类的构造器使用一个图标和一个点参数并提供一个小系列的事件对象(如单击)等等。上面的 网站建设
网站制作
北京网站设计
ovrlay.htm例子就提供了一个简单的创建标记的例子。 网站设计
创建标记最难的部分是指定图标，它比较复杂，是因为在Maps 网页设计
企通互联
企通互联
API中，有相当多的不同的图像才构成 网站建设
一个简单的图标。 北京网站设计 网站设计
每个图标有（至少有）一个前景图像和一个阴影图像。阴影图像需要从前景图像的45度角方位创建， 北京网站建设
网站建设
网站设计
阴影图像的左下角必须与图标前景图像的左下角绑定在一起。阴影需要是一个24位的透明性为alpha 网站制作
网页设计
网站制作
的PNG图像，这样其边缘才能在地图上方看起来正确。 网页设计
GIcon类需要在你初始化它们的时候指定这些影像的尺寸，这样Maps 北京网页设计
北京网站设计
北京网站制作
API才能创建合适大小的图像元 企通互联
素。这是指定一个图标所需要的最小量的代码(在这里，图标是google 网站建设
网站设计
北京网站建设
maps中使用)。 网站建设
var icon = new GIcon(); 网站设计
icon.image = "http://www.google.com/mapfiles/marker.png"; 网站制作
icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 企通互联
icon.iconSize = new GSize(20, 34); 网站建设
icon.shadowSize = new GSize(37, 34); 网站建设
GIcon类提供了另外7个属性，你应该设定这些属性来使你的图标得到最多的浏览器兼容性和功能。例如，imageMap属性指定了图标图形中不透明的部分的形­-状。如果你没有在你的图标对象中设定这个属性，整个的图标图像（包括透明部分）将会在Firefox/Mozilla浏览器中变得可以点击的。查看GIcon­类-参考得到更多的消息。 北京网页设计
网页设计
北京网站设计
折线 网页设计(Polylines) 网站建设
GPolyline类构造器使用一系列的经纬度二维数组作为参数。你可以指定线的颜色，宽度和透明度。颜色可以用老的HTML样式指定，如"#FF0000".­-GPloyline不懂得以颜色单词，如"red"命名的颜色。例如，下面的代码创建一个两点之间的10象素宽，红色的线。 北京网页设计
网站建设
北京网站设计
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419), 北京网站设计
new GPoint(-122.1519, 37.4519)], 北京网站设计
"#ff0000", 10); 网页设计
map.addOverlay(polyline); 北京网站建设
在IE浏览器中，我们使用VML来画多线。在其它的浏览器中，我们从google的服务器中请求线的图像 北京网站建设
北京网站设计
网页设计
并将图像叠加在地图上，在地图被缩放和漫游时，酌情刷新地图。 网站制作
网站建设
网站建设
控制器(Controls) 企通互联
Controls使用addControl方法被添加上去.Maps 北京网页设计
API提供了一套内嵌的控制器，你可以在地图里面使 北京网站制作
用他们： 网页设计
GLargeMapControl－一个在Google 北京网站制作
Maps上的大的缩放/漫游工具。 企通互联
GSmallMapControl－一个在Google 北京网页设计
Local上的小一些的缩放/漫游工具 企通互联 网页设计
GSmallZoomControl-一个小的缩放工具，在Geegle 网站建设
Maps上一个小的弹出窗口中使用它来显示一定的 北京网站设计
方向。 北京网站建设
GMapTypeControl－让你在不同的Map类型中进行切换（如map和satellite） 网页设计
网站建设
企通互联
例如，要添加一个你在google 企通互联
maps上看到的缩放/漫游控制器到你的地图上，你需要在你的地图初始 北京网站制作
网站建设
网页设计
化时引入下面的一行代码 北京网站制作
map.addControl(new GLargeMapControl()); 网页设计
北京网站制作
北京网站设计
XML和RPC 网页设计
Google Maps 北京网页设计
API提供了一个工厂方法来创建XmlHttpRequest对象，这些对象在近期版本的IE， 企通互联
北京网页设计
北京网站设计
FireFox和Safari中都能使用。例如： 北京网站建设
var request = GXmlHttp.create(); 北京网站建设
request.open('GET', "myfile.txt", true); 北京网站建设
request.onreadystatechange = function() { 北京网页设计
if (request.readyState == 4) { 企通互联
alert(request.responseText); 北京网站制作
} 北京网站建设
北京网页设计
企通互联
网站建设
} 北京网站制作
北京网站设计
北京网站制作
request.send(null); 北京网页设计
你可以使用静态方法Gxml.parse来解析一个XML文档，它只需要一个XML字符串作为唯一的参数。这个方法对所有的浏览器都兼容，如果浏览器没有本地的­-XML解析器的话，它将使用一个javascriptXML解析器作为后援。我们不能对这些后备的解析器在性能和正确性上作出任何保证。
网页设计
Tag： API,MAPS,GOOGLE 北京网站设计
Google Maps API 北京网页设计
可以让你在你自己的网页上嵌入google地图。要使用这个API,你需要上这里去 网页设计
http://www.google.com/apis/maps/signup.htm 网站设计
申请一个API key 并按照下面的说明来做。 北京网站设计
网页设计
网站设计
这个API是新的，所以以完美的文档的要求来说，它可能会有一些小错误。容忍我们，我们将填补这些漏洞，您可以参加这个 北京网站设计
Google Maps API 中文讨论区 北京网站设计
http://groups.google.com/group/Goolgle-Map-Chinese 网站制作
地图讨论组来反馈您的问题并讨论这个API。 网站制作
正文如下： 北京网页设计
介绍： 北京网站建设
Google Maps的"helloword"程序 网站制作
浏览器的选择 网站制作
XHTML和VML 企通互联
API更新 北京网站制作
地理编码，路径选择等 企通互联
例子： 网页设计
最基本的 北京网页设计
地图移动和动画 北京网站建设
向地图中添加控件 北京网站设计
事件监听 网站制作
打开一个属性窗口 北京网站制作
地图叠置 网站制作
单击操作 网站建设
在标记上的窗口显示信息 企通互联
创建图标 北京网站制作
使用图标类 网站制作
在地图上使用XML和异步传输RPC（"AJAX"） 企通互联
API 总览 北京网站制作
GMap 类（the GMap class） 企通互联
事件 （Event） 北京网站制作
信息窗口（the info window） 企通互联
叠置（Overlays） 北京网站建设
图标和标记（Icons and Markers） 企通互联
折线（Polylines） 网站建设
控件（Controls） 北京网页设计
XML 和 RPC 网站设计
类参考 北京网页设计
GMap 网站建设
* Constructor 企通互联
* Methods 北京网页设计
* Configuration 网站建设
* Controls 北京网站制作
* State 企通互联
* Overlays 北京网站设计
* Info Window 企通互联
* Event 北京网站设计
北京网页设计
北京网页设计
GMarker 网站建设
* Constructor 北京网页设计
* Methods 网站建设
* Events 北京网页设计
GPloyLine 企通互联
* Constructor 北京网站设计
网站制作
北京网站制作
GIcon 北京网站建设
* Constructor 网站建设
* Properties 北京网站设计
网站建设
网站制作
GEvent 网页设计
* Static Methods 北京网页设计
北京网页设计
网站建设
GXmlHttp 企通互联
* Static Methods 北京网站制作
企通互联
企通互联
GXml 北京网站制作
* Static Methods 北京网站制作
GXslt 网页设计
* Static Methods 网站制作
* Methods 网页设计
网站设计
网站设计
GPoint 企通互联
* Constructor 企通互联
* Properties 北京网站设计
北京网站制作
网页设计
GSize 北京网站建设
* Constructor 网站制作
* Propertes 网站制作
GBounds 北京网站建设
* Constructor 北京网站建设
* Properties 网站建设
简介： 网站制作
Google Maps 的"hello world"实例 网站建设
北京网站设计
网页设计
最简单的开始学习这个API的方法是看一个简单的例子。。这个网页显示了以Palo 北京网站建设
网站制作
网站建设
Alto为中心的一个300×300的地图 北京网站设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 网站制作
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 企通互联
<html xmlns="http://www.w3.org/1999/xhtml"> 北京网站设计
<head> 北京网站设计
<title>Google Maps JavaScript API Example - simple</title> 网站制作
<script 网站建设
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 北京网站建设
北京网站建设
北京网站制作
</head> 北京网站设计
<body> 网站建设
<div id="map" style="width: 300px; height: 300px"></div> 北京网页设计
<script type="text/javascript"> 北京网站建设
//<![CDATA[ 北京网页设计
if (GBrowserIsCompatible()) { 北京网站建设网站建设
var map = new GMap(document.getElementById("map")); 企通互联
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站设计
} 北京网站建设
//]]> 网站设计
</script> 网站制作
</body> 北京网站制作
</html> 北京网站设计
你可以把这个例子下载下来并编辑和测试它，但是你需要将"abcdefg"替换成你自己的Maps 企通互联
网页设计
北京网页设计
API key，让这个例子能在你自己的网站上运行。 北京网站设计
正如你在上面的例子中所看到的，Google 北京网站建设
Maps引入了一个简单的javascript 北京网站制作
url（http://maps.google.com/maps?file=api&v=1）,这个url包含了所有的在你的网页上创建地图的所需要的标记和符号。要使用Google 网站制作
网站建设
北京网页设计
Maps 网站建设
Api，你需要去创建一个简单的script标记来指向这个url，当然要加上你从google那里申请来的这个API的key。 北京网页设计
网页设计
网站制作
<script 网页设计
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 网站设计
网页设计
网站制作
Google Maps 北京网页设计
API输出的最主要的类是GMap类，它表现了一个网页上的简单的地图。你可以创建更多的这个类的实例（每个实例来表网页上的一个地图）。地图被嵌入到一个容器­-中，一般是一个div元素。 网站制作
北京网站建设
北京网站设计
操纵和叠置图层到地图实例的方法会在下面详细介绍。 北京网站制作
网页设计
网页设计
浏览器兼容性 北京网页设计
Google Maps并不对所有的浏览器兼容。现在Google 企通互联
Maps支持的浏览器版本有Firefox/Mozilla,IE5.5以上版本，Safari1.2以上版本部分支持Opera。它不支持IE5.0。由于不­-同的应用要求用户对不同的浏览器作不同的操作，Maps 网站建设
企通互联
网页设计
API提供了一个globle 企通互联
方法（GBrowserIsCompatible（））来检查兼容性，但是它没有任何自动的针对不同浏览器的行为。 企通互联
北京网页设计
网站建设
脚本http://maps.google.com/maps?file=api&v=1将在几乎所有的浏览器上被正确解析，所以你可以在检查兼容性之前安全地将这个脚本引入进来。 网站建设
网站设计
网页设计
除了上面的例子检测了兼容性外，本文档中的所有例子都没有检测兼容性，对于老的浏览器，他们也不会提示任何信息。显然，真正的应用中应该将事情做得更好，但是我­-们忽略了这些检查来让我们的例子更容易读。 北京网页设计
网站设计
网站建设
XHTML 和 VML 网站设计
我们推荐您再包含地图的网页上使用符合标准的XHTML。当浏览器检测到在页首的DOCTYPE标签时，它们将使用符合标准的模式来执行你的网页，这样可以使得­-在不同的浏览器上的布局和行为更加的可预料一些。 网站建设
企通互联
网站制作
同样的，如果你在你的地图上要包含PLOYLINE，对于IE浏览器你需要在你的XHTML文档中引入VML名称空间。你的HTML文档应该这样开始： 网站制作
网页设计
网站制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 网站设计
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 北京网站制作北京网页设计
<html 网站建设
xmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml"> 北京网站设计
网站设计
北京网站建设
<head> 北京网页设计
<style type="text/css"> 网站制作
v\:* { 北京网站设计
behavior:url(#default#VML); 网站建设
} 北京网站设计
</style> 网页设计
<script 网站制作
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script> 网页设计
企通互联
北京网站建设
</head> 北京网站建设
查看Microsoft VML workshop可以得到更多信息。 企通互联
API 的更新 网站设计
URl 网站制作
http://maps.google.com/maps?file=api&v=1代表API的'1.0'版本。当我们要对这个API作出重大更新的时候，我们将增加版本号并在GOOGLE 北京网页设计
网站设计
网站设计
CODE和MAP API讨论组发表通告。 企通互联
我们将尝试同时运行新版本和旧版本，一个月后，老的版本就会被停用。 北京网页设计
网页设计
北京网站制作
Maps团队将透明地更新API，包括增强它地性能，修复它的bugs。这些bugs修复工作只是为了提高性能和填补漏洞，但是我们可能会不经意地破坏一些AP­-I客户，请在Maps 北京网站制作
网站制作
北京网页设计
API讨论组中报告这些情况。 北京网页设计
地理编码，路径，等等 北京网站制作
Google Maps 北京网站建设
API还没有包含地理编码和路由服务，但网罗上有很多的免费的地理编码。 北京网页设计
网页设计
网站制作
示例： 北京网站制作
the basics 北京网页设计
创建一副地图并将其中心定位在Palo Alto； 网站制作
var map = new GMap(document.getElementById("map")); 网页设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站建设
map movement and animation 北京网站制作
网页设计
网页设计
recenterOrPanToLatLng方法进行一个持续的漫游，如果经纬度范围不在当前的地图窗口中的话，另外它还可以进行一个离散的移动。 北京网页设计
网页设计
北京网站建设
var map = new GMap(document.getElementById("map")); 网站设计
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); 网站建设
window.setTimeout(function() { 北京网站设计
map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569)); 北京网站建设
}, 2000); 网站制作
Adding Controls to the Map 企通互联
北京网页设计
北京网站建设
你可以使用addControl方法往地图上添加控件。在这个例子中，我们添加了GSmallMapControl和GMapTypeControl，折使得我­-们能够缩放，漫游地图并在地图和卫星影像之间做切换。 网站建设
北京网站建设
网站制作
var map = new GMap(document.getElementById("map")); 北京网站设计
map.addControl(new GSmallMapControl()); 网站建设
map.addControl(new GMapTypeControl()); 北京网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站设计
Event Listeners 网站设计
网站制作
网页设计
事件监听器在GEvent.addListener方法中注册。在这个例子中，在用户将地图移动或者拖动以后，我们会返回地图的中间的经纬度坐标。 企通互联
网站设计
网页设计
var map = new GMap(document.getElementById("map")); 北京网页设计
GEvent.addListener(map, "moveend", function() { 网页设计
var center = map.getCenterLatLng(); 网页设计
var latLngStr = '(' + center.y + ', ' + center.x + ')'; 网站设计
document.getElementById("message").innerHTML = latLngStr; 企通互联
}); 网站建设
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 企通互联
打开一个消息窗口 北京网站设计(opening an info window) 网站制作
显示一个指向地图中间的"hello 网站制作
world"信息窗口。信息窗口一般的会在标签上方被打开,但是他们也可以在地图的任何地方被打开。 网站建设
网页设计
企通互联
var map = new GMap(document.getElementById("map")); 北京网站设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站制作
map.openInfoWindow(map.getCenterLatLng(), 北京网站设计
document.createTextNode("Hello world")); 北京网站设计
地图叠加(Map Overlays) 北京网站设计
创建了十个随机的标记和一个随机的折线来展示map 网站制作
overlays的用途 北京网站制作
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 网站设计
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 北京网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站设计
// Add 10 random markers in the map viewport using the default icon 网站建设
var bounds = map.getBoundsLatLng(); 网站制作
var width = bounds.maxX - bounds.minX; 企通互联
var height = bounds.maxY - bounds.minY; 企通互联
for (var i = 0; i < 10; i++) { 网页设计
var point = new GPoint(bounds.minX + width * Math.random(), 网站建设
bounds.minY + height * Math.random()); 网页设计
var marker = new GMarker(point); 北京网站设计
map.addOverlay(marker); 网页设计
网页设计
网页设计
网页设计
} 网页设计
网站建设
网页设计
// Add a polyline with 4 random points. Sort the points by longitude so 企通互联
企通互联
that 北京网页设计
// the line does not intersect itself. 网站制作
var points = []; 企通互联
for (var i = 0; i < 5; i++) { 北京网站建设
points.push(new GPoint(bounds.minX + width * Math.random(), 北京网页设计
bounds.minY + height * Math.random())); 北京网站建设
网站制作
企通互联
网站建设
} 北京网站制作
北京网站制作
企通互联
points.sort(function(p1, p2) { return p1.x - p2.x; }); 北京网站建设
map.addOverlay(new GPolyline(points)); 北京网站制作
单击操作(Click Handling). 网站建设
网站设计
当你点击地图的时候，你往那个点上面添加了一个标记。当你再次点击这个点的时候，你将这个点从地图上抹掉了。 北京网站设计
企通互联
网站制作
var map = new GMap(document.getElementById("map")); 企通互联
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 网站建设
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站建设
GEvent.addListener(map, 'click', function(overlay, point) { 企通互联
if (overlay) { 北京网站设计
map.removeOverlay(overlay); 网站建设
} else if (point) { 网站建设
map.addOverlay(new GMarker(point)); 网页设计
} 网站建设
企通互联
北京网站建设
北京网站制作
}); 网站建设
北京网页设计
北京网站制作
在标记上显示消息窗口(Display Info windows Above Markers) 网页设计
在这个示例中，我们通过监听对每个标记的单击事件来显示一个定义的消息窗口，我们使用了关闭窗口的功能来对每个窗口的内容进行用户化的定制。 网站制作
北京网站制作
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 网站设计
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 北京网站设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站制作
// Creates a marker whose info window displays the given number 网站设计
function createMarker(point, number) { 北京网站制作
var marker = new GMarker(point); 网页设计
// Show this marker's index in the info window when it is clicked 网站建设
var html = "Marker #<b>" + number + "</b>"; 企通互联
GEvent.addListener(marker, "click", function() { 北京网站建设
marker.openInfoWindowHtml(html); 网站建设
}); 网站建设
return marker; 网站建设
网站设计
网站设计
网站制作
} 北京网站建设
网页设计
网站制作
// Add 10 random markers in the map viewport 北京网站制作
var bounds = map.getBoundsLatLng(); 网站设计
var width = bounds.maxX - bounds.minX; 网站设计
var height = bounds.maxY - bounds.minY; 网站建设
for (var i = 0; i < 10; i++) { 企通互联
var point = new GPoint(bounds.minX + width * Math.random(), 北京网站设计
bounds.minY + height * Math.random()); 北京网站设计
var marker = createMarker(point, i + 1); 网页设计
map.addOverlay(marker); 网页设计
北京网站制作
北京网站设计
} 北京网站设计
北京网站建设
网页设计
创建图标 北京网页设计
创建一个新类型的图标，使用在Google Ride 企通互联
Finder中的"mimi"标记作为例子。我们需要制定 网站设计
这个图像的前景图像，阴影图像,以及我们想要将这些图标放在地图上的位置和和这些图标相对应的 网站建设
北京网站设计
信息窗口。 北京网站建设
// Create our "tiny" marker icon 网页设计
var icon = new GIcon(); 网站设计
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 网站建设
icon.shadow = 网站设计
"http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 网站制作
icon.iconSize = new GSize(12, 20); 北京网站制作
icon.shadowSize = new GSize(22, 20); 北京网页设计
icon.iconAnchor = new GPoint(6, 20); 网站建设
icon.infoWindowAnchor = new GPoint(5, 1); 北京网站设计
// Center the map on Palo Alto 北京网站设计
var map = new GMap(document.getElementById("map")); 北京网页设计
map.addControl(new GSmallMapControl()); 网站建设
map.addControl(new GMapTypeControl()); 网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 网站制作
// Creates one of our tiny markers at the given point 网站制作
function createMarker(point) { 网页设计
var marker = new GMarker(point, icon); 北京网站建设
map.addOverlay(marker); 网站制作
GEvent.addListener(marker, "click", function() { 北京网站设计
marker.openInfoWindowHtml("You clicked me!"); 北京网页设计
}); 网页设计
北京网页设计
网站设计
网站设计
} 北京网站制作
网站设计
网页设计
// Place the icons randomly in the map viewport 网站设计
var bounds = map.getBoundsLatLng(); 北京网页设计
var width = bounds.maxX - bounds.minX; 网站制作
var height = bounds.maxY - bounds.minY; 北京网站制作
for (var i = 0; i < 10; i++) { 北京网站制作
createMarker(new GPoint(bounds.minX + width * Math.random(), 网站设计
bounds.minY + height * Math.random())); 网站制作
网页设计
网站设计
} 北京网站设计
网站制作
网页设计
使用图标类(Using Icon Classes) 网站制作
网页设计
在很多种情况下，你的图标也许会有相同的前景色，但可能有不同的形状和阴影。最简单的达到 网站建设
网站建设
北京网页设计
这种效果的方法是使用GIcon 北京网站建设
类的拷贝，这些拷贝将你所要定义的图标属性都拷贝到一个你所定义的 网站设计
网页设计
网站设计
新的图标上去。 北京网站建设
// Create a base icon for all of our markers that specifies the shadow, 网站建设
网站设计
网站设计
icon 网站制作
// dimensions, etc. 网站制作
var baseIcon = new GIcon(); 北京网站制作
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 企通互联
baseIcon.iconSize = new GSize(20, 34); 北京网页设计
baseIcon.shadowSize = new GSize(37, 34); 北京网站建设
baseIcon.iconAnchor = new GPoint(9, 34); 北京网站设计
baseIcon.infoWindowAnchor = new GPoint(9, 2); 北京网站设计
baseIcon.infoShadowAnchor = new GPoint(18, 25); 企通互联
// Center the map on Palo Alto 北京网站建设
var map = new GMap(document.getElementById("map")); 网站制作
map.addControl(new GSmallMapControl()); 企通互联
map.addControl(new GMapTypeControl()); 网站制作
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 企通互联
// Creates a marker whose info window displays the letter corresponding 网页设计
北京网页设计
网站制作
to 企通互联
// the given index 网站建设
function createMarker(point, index) { 网站建设
// Create a lettered icon for this point using our icon class from 网页设计
above 北京网页设计
var letter = String.fromCharCode("A".charCodeAt(0) + index); 北京网站制作
var icon = new GIcon(baseIcon); 网站建设
icon.image = "http://www.google.com/mapfiles/marker" + letter + 网站制作
".png"; 北京网站制作
var marker = new GMarker(point, icon); 北京网站制作
// Show this marker's index in the info window when it is clicked 网站制作
var html = "Marker <b>" + letter + "</b>"; 企通互联
GEvent.addListener(marker, "click", function() { 企通互联
marker.openInfoWindowHtml(html); 北京网站设计
}); 北京网站建设
return marker; 北京网站制作
网站建设
网页设计
北京网站制作
} 北京网站制作
北京网站设计
网站制作
// Add 10 random markers in the map viewport 网站建设
var bounds = map.getBoundsLatLng(); 网页设计
var width = bounds.maxX - bounds.minX; 企通互联
var height = bounds.maxY - bounds.minY; 网页设计
for (var i = 0; i < 10; i++) { 网页设计
var point = new GPoint(bounds.minX + width * Math.random(), 网站建设
bounds.minY + height * Math.random()); 北京网站设计
var marker = createMarker(point, i); 网站建设
map.addOverlay(marker); 北京网站制作
网站制作
网站制作
} 网站设计
北京网页设计
网站制作
在地图上使用XML和异步远程方法调用Using XML and 网站建设
Asynchronous RPC('AJAX') 北京网页设计
在这个例子中，我们下载了一个静态文件"data.xml"，这个文件包含有一系列以XML存储的经纬度坐标。当下载完成后，我们解析这个XML文件并在每个经­-纬度交汇处，创建一个图标。 北京网站制作
网页设计
// Center the map on Palo Alto 网站制作
var map = new GMap(document.getElementById("map")); 北京网站建设
map.addControl(new GSmallMapControl()); 北京网站建设
map.addControl(new GMapTypeControl()); 网页设计
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 北京网站设计
// Download the data in data.xml and load it on the map. The format we 北京网站制作
// expect is: 网站建设
// <markers> 北京网站制作
// <marker lat="37.441" lng="-122.141"/> 北京网站制作
// <marker lat="37.322" lng="-121.213"/> 企通互联
// </markers> 企通互联
var request = GXmlHttp.create(); 北京网页设计
request.open("GET", "data.xml", true); 网页设计
request.onreadystatechange = function() { 北京网站设计
if (request.readyState == 4) { 北京网站建设
var xmlDoc = request.responseXML; 北京网站设计
var markers = 网页设计
xmlDoc.documentElement.getElementsByTagName("marker"); 网站制作
for (var i = 0; i < markers.length; i++) { 企通互联
var point = new 北京网站设计
GPoint(parseFloat(markers[i].getAttribute("lng")), 北京网页设计
网站建设
企通互联
parseFloat(markers[i].getAttribute("lat"))); 北京网站制作
var marker = new GMarker(point); 网站建设
map.addOverlay(marker); 北京网站建设
} 北京网页设计
} 企通互联
北京网站建设
网站设计
网站制作
} 北京网页设计
北京网站设计
网页设计
request.send(null); 网站设计
网站制作
API 总览 北京网站设计
GMap 类 北京网页设计
GMap类的一个实例代表网页上的一个简单的地图。你可以为这个实例创建很多实例（这个网页上有多少地图，你就可以创建多少个）。一个地图被包含再一个容器中，­-一般来说是一个DIV元素。如果你没有明确地指出地图的尺寸，地图将会使用容器的大小来决定其大小。 北京网页设计
网站建设
北京网站建设
GMap类提供一些方法来控制地图的空间位置（指定中心和缩放程度）和在地图上添加和移除叠加图层(overlays).它还提供了打开一个"消息窗口"的方法­-，这个"消息窗口"就是你再Google 企通互联
北京网站制作
网页设计
Maps和Google 网页设计
Local中所看到的。一个地图只有一个简单的消息窗口，所以在一个指定时间你只能看到一个窗口。 网页设计
网站建设
网页设计
Event 网站制作
北京网站制作
网页设计
你可以使用Event监听器往你的应用中动态地添加元素。一个对象提供了很多被命名的事件(Event),你的应用可以使用静态方法GEvent.addLis­-tener或者GEvent.bind监听这些事件。例如，下面的代码片断就在用户点击地图窗口时显示一个警告信息。 北京网站设计
北京网站制作
北京网页设计
var map = new GMap(document.getElementById("map")); 北京网页设计
GEvent.addListener(map, "click", function() { 网站制作
alert("You clicked the map"); 北京网站设计
北京网站设计
网站制作
北京网站建设
}); 北京网页设计北京网站设计
网站设计
北京网页设计
GEvent.addListener方法作为一个第三参数的函数存在，这个方法的使用需要引用一个事件处理函数在里面。如果你像要对一个方法类绑定一个事件，­-你可以使用GEvent.bind。例如： 网站建设 网站建设
北京网站建设
function MyApplication() { 网站制作
this.counter = 0; 网站设计
this.map = new GMap(document.getElementById("map")); 北京网站建设
GEvent.bind(this.map, "click", this, this.onMapClick); 北京网站设计
北京网页设计
网站建设
网站制作
} 网站设计
网站设计
北京网站设计
MyApplication.prototype.onMapClick() { 北京网站建设
this.counter++; 网站设计
alert("You have clicked the map " + this.counter + 网站设计
this.counter == 1 ?" time.":" times."); 企通互联
网站设计
北京网站设计
} 北京网站设计
北京网站设计
网站建设
var application = new MyApplication(); 北京网页设计
北京网站建设
消息窗口(the info window). 北京网站制作
Map 网页设计
类有一个简单的"消息窗口"，可以在地图上方的浮动窗口内显示HTML内容。 网站制作
网站建设
北京网站设计
最基本的"消息窗口"方法时openInfoWindow，这个方法使用一个点和一个HTML中的Dom元素作为参数。HTML 北京网站制作
北京网站制作
网页设计
DOM元素被添加在消息窗口容器之后，消息窗口会显示在这个点上方。 北京网页设计
网站制作
北京网站设计
openInfoWindowHtml也很相似，但是它以一个HTML字符串作为一个参数而不是一个DOM元素。 北京网站设计
北京网站制作
网站制作
openInfoWindowsXslt以一个XML 网站建设
DOM元素以及XSLT文档的URL来产生窗口内容，如果用户的浏览器没有下载下来的话，将异步地下载XSLT。 网站制作
网站建设
企通互联
要在一个叠置图层（例如一个标记）上显示消息窗口，你可以通过一个可选的第三参数指定消息窗口 企通互联
北京网站设计
北京网站设计
位置和你所指定的点之间的偏移量。例如，如果你的标记有10个象素高，你可以设置该象素便宜为GSize(0,-10). 北京网站设计
北京网页设计
网页设计
GMarker类提供openInfoWindow方法来为你处理图标的大小和形状产生的象素偏移，所以你一般不需要为计算你应用中的图标偏移而担心。 网站建设
企通互联
北京网站制作
叠置图层(Overlays) 北京网站建设
叠置图层（似乎应该翻译为叠加物更为妥当）时在地图上的和经纬度坐标绑定的对象，所以它们会随 网站建设
北京网站设计
网站制作
着你拖动/缩放或者变换地图投影的时候(例如变换地图模式到卫星模式的时候)。 北京网页设计
北京网站制作
网站制作
Maps 企通互联
API提供了两种类型的叠加物，一种是标记，他们是地图上的图标，另外一种是折线，他们是通 北京网站设计
网站建设
网站制作
过经纬度坐标构成的。 网站设计
北京网站建设
网页设计
图标和标记 北京网站建设
GMarker类的构造器使用一个图标和一个点参数并提供一个小系列的事件对象(如单击)等等。上面的 网站建设
网站制作
北京网站设计
ovrlay.htm例子就提供了一个简单的创建标记的例子。 网站设计
创建标记最难的部分是指定图标，它比较复杂，是因为在Maps 网页设计
企通互联
企通互联
API中，有相当多的不同的图像才构成 网站建设
一个简单的图标。 北京网站设计 网站设计
每个图标有（至少有）一个前景图像和一个阴影图像。阴影图像需要从前景图像的45度角方位创建， 北京网站建设
网站建设
网站设计
阴影图像的左下角必须与图标前景图像的左下角绑定在一起。阴影需要是一个24位的透明性为alpha 网站制作
网页设计
网站制作
的PNG图像，这样其边缘才能在地图上方看起来正确。 网页设计
GIcon类需要在你初始化它们的时候指定这些影像的尺寸，这样Maps 北京网页设计
北京网站设计
北京网站制作
API才能创建合适大小的图像元 企通互联
素。这是指定一个图标所需要的最小量的代码(在这里，图标是google 网站建设
网站设计
北京网站建设
maps中使用)。 网站建设
var icon = new GIcon(); 网站设计
icon.image = "http://www.google.com/mapfiles/marker.png"; 网站制作
icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 企通互联
icon.iconSize = new GSize(20, 34); 网站建设
icon.shadowSize = new GSize(37, 34); 网站建设
GIcon类提供了另外7个属性，你应该设定这些属性来使你的图标得到最多的浏览器兼容性和功能。例如，imageMap属性指定了图标图形中不透明的部分的形­-状。如果你没有在你的图标对象中设定这个属性，整个的图标图像（包括透明部分）将会在Firefox/Mozilla浏览器中变得可以点击的。查看GIcon­类-参考得到更多的消息。 北京网页设计
网页设计
北京网站设计
折线 网页设计(Polylines) 网站建设
GPolyline类构造器使用一系列的经纬度二维数组作为参数。你可以指定线的颜色，宽度和透明度。颜色可以用老的HTML样式指定，如"#FF0000".­-GPloyline不懂得以颜色单词，如"red"命名的颜色。例如，下面的代码创建一个两点之间的10象素宽，红色的线。 北京网页设计
网站建设
北京网站设计
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419), 北京网站设计
new GPoint(-122.1519, 37.4519)], 北京网站设计
"#ff0000", 10); 网页设计
map.addOverlay(polyline); 北京网站建设
在IE浏览器中，我们使用VML来画多线。在其它的浏览器中，我们从google的服务器中请求线的图像 北京网站建设
北京网站设计
网页设计
并将图像叠加在地图上，在地图被缩放和漫游时，酌情刷新地图。 网站制作
网站建设
网站建设
控制器(Controls) 企通互联
Controls使用addControl方法被添加上去.Maps 北京网页设计
API提供了一套内嵌的控制器，你可以在地图里面使 北京网站制作
用他们： 网页设计
GLargeMapControl－一个在Google 北京网站制作
Maps上的大的缩放/漫游工具。 企通互联
GSmallMapControl－一个在Google 北京网页设计
Local上的小一些的缩放/漫游工具 企通互联 网页设计
GSmallZoomControl-一个小的缩放工具，在Geegle 网站建设
Maps上一个小的弹出窗口中使用它来显示一定的 北京网站设计
方向。 北京网站建设
GMapTypeControl－让你在不同的Map类型中进行切换（如map和satellite） 网页设计
网站建设
企通互联
例如，要添加一个你在google 企通互联
maps上看到的缩放/漫游控制器到你的地图上，你需要在你的地图初始 北京网站制作
网站建设
网页设计
化时引入下面的一行代码 北京网站制作
map.addControl(new GLargeMapControl()); 网页设计
北京网站制作
北京网站设计
XML和RPC 网页设计
Google Maps 北京网页设计
API提供了一个工厂方法来创建XmlHttpRequest对象，这些对象在近期版本的IE， 企通互联
北京网页设计
北京网站设计
FireFox和Safari中都能使用。例如： 北京网站建设
var request = GXmlHttp.create(); 北京网站建设
request.open('GET', "myfile.txt", true); 北京网站建设
request.onreadystatechange = function() { 北京网页设计
if (request.readyState == 4) { 企通互联
alert(request.responseText); 北京网站制作
} 北京网站建设
北京网页设计
企通互联
网站建设
} 北京网站制作
北京网站设计
北京网站制作
request.send(null); 北京网页设计
你可以使用静态方法Gxml.parse来解析一个XML文档，它只需要一个XML字符串作为唯一的参数。这个方法对所有的浏览器都兼容，如果浏览器没有本地的­-XML解析器的话，它将使用一个javascriptXML解析器作为后援。我们不能对这些后备的解析器在性能和正确性上作出任何保证。
责任编辑:admin 责编无QQ