Google Map Api文档,免费Google地图API使用说明
Google Map Api文档,免费Google地图API使用说明 ,Google Map Api文档,免费Google地图API使用说明 ,
Google Map Api文档,免费Google地图API使用说明
Google Map Api文档,免费Google地图API使用说明
Google Map Api文档,免费Google地图API使用说明
下面会讲到如何给地图实例添加和操作标注.
浏览器兼容性
Google Maps并不是对每一个浏览器都兼容的， Google Maps 现在兼容Firefox/Mozilla, IE 5.5 , Safari
1.2 和Opera ，不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的， 所以Maps API提供了一个全局的方法(GBrowserIsCompatible()) 来检查浏览器兼容性， 但是并不自动检查. 引入的脚
本http://maps.google.com/maps?file=api&v=1可以在几乎所有的浏览器中被正常解析， 所以你可以放心的在检查浏览器兼容性之前引入该脚本.
在本文的所有例子之中，除了上面的一篇之外，其他的既没有用GBrowserIsCompatible()检查浏览器兼容性，也没有给出任何错误信息 正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查. XHTML 和VML
建议你在需要使用地图的网页上使用标准的兼容性好的XHTML, 当页面顶端存在DOCTYPE 标签时，浏览器会使用" 标准兼容模式" 来处理页面， 这将使页面能更好的跨越浏览器执行.
同样，如果你需要在地图上包含折线，你需要为IE 浏览器在页面上引入VML 命名空间 这样，你的文档开头就应该是这样的：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
关于VML ，你可以在Microsoft's VML workshop查找更多信息.
API 更新
引入的JavaScript 文件URL http://maps.google.com/maps?file=api&v=1指向到 API 的" 版本1" ， 如果API 出现了重要的升级，会增加这个版本号并且在Google Code和Maps API讨论组上面发布公告.
Google 会同时运行新版和旧版一个月左右，随后旧版就会被关闭.
地图工作小组会在修复BUG 或改善性能之后随时更新API ，这些更新仅仅是为了改善性能和修复错误，不过在这个工程之中也可能发生影响API 连接的情况 如果这样的事情发生，你可以到Maps API discussion group报告你遇到的情况地理、行程和其他
Google Maps API现在并不包含地理和 行程服务, 可在网上有许多关于free geocoders的相关内容.
应用范例
一个简单例子
创建一个在所在层中居中的地图
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(simple.html)
地图的移动和变换
,Google Map Api文档,免费Google地图API使用说明
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);
查看范例(animate.html)
在地图上添加控件
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);
查看范例(controls.html)
事件监视
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);
查看范例(event.html)
显示信息浮窗
这个范例显示一个指向地图中心点的"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"));
查看范例(infowindow.html)
地图标注
本范例通过创建10个随机的标注和折线来说明地图标注的用法.
// 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());
,Google Map Api文档,免费Google地图API使用说明
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));
查看范例(overlay.html)
响应用户点击
本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记. 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));
}
});
查看范例(click.html)
在标记上显示信息浮窗
在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.
// 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 #" number "";
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);
}
查看范例(markerinfowindow.html)
,Google Map Api文档,免费Google地图API使用说明
创建图标
创建一种新图标, 就像在Google Ride Finder上面使用的迷你标记一样. 必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.
// 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()));
}
查看范例(icon.html)
使用图标类
多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon 类的copy 方法来构造. 这样可以将一个Icon 对象的所有属性复制到一个新的Icon 对象中.
// 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
,Google Map Api文档,免费Google地图API使用说明
var html = "Marker " letter "";
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);
}
查看范例(iconclass.html)
在地图上使用XML 和异步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:
//
//
//
//
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);
查看范例(async.html)
API 概要
GMap 类
GMap 的每一个实例表现为页面上的一个地图，可以创建这个类的多个实例 每个地图被包含在一个container 之中，比如一个DIV 标签，除非明确指定，地图将使用相应container 的大小.
GMap 类提供了操作地图点(中心和缩放度) 和添加删除标记(比如GMarker 和GPolyline 实例) 和方法. 同时也提供了一个打开" 信息浮窗" 的方法，地图上同时只能有一个信息浮窗.
更多信息请参看GMap 类参考
,Google Map Api文档,免费Google地图API使用说明
事件
利用事件监视器，你可以在程序中加入动态的内容，每个实例提供一些指定的事件，你的程序可以利用静态方
法GEvent.addListener 或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();
信息浮窗
Map 类有一个信息浮窗，可以在地图上以浮动窗口模式在地图上显示HTML 内容.
基本的浮动窗口方法是openInfoWindow ，这个方法以一个点和一个HTML 节点作为参数，这个HTML 节点被添加到信息浮窗容器里面，并显示在相应点处.
openInfoWindowHtml 差不多，但是它使用HTML 字符串作为参数. openInfoWindowXslt 则利用XML 节点和XSLT 文档的URL 地址来生成信息浮窗内容，如果该XSLT 文档还没有被下载，则会自动异步下载此文件.
如果需要在标记上显示信息浮窗，你可以传递第三个参数(可选) 给出窗口顶端和给定点位置的像素差. 比如你的标记高度是10px, 你可以使用GSize(0,-10)作第三个参数.
GMarker 类还提供了openInfoWindow 方法用来处理像素值内容，所以不用担心在程序中计算像素的问题.
标注
标注是一些绑定到地理坐标的对象，当移动、缩放地图或切换模式(比如从地图到卫星图) 时，标注也会跟着变化. Maps API提供两种标注:标记(地图上的图标) 和折线(根据地理位置绘制的折线)
图标和标记
The GMarker 构造函数使用一个图标和一个点作为参数，并提供一些类似" 点击" 的事件，看这个创建标记的例子创建标记最困难的地方是指定图标，复杂在于一个图标需要几个不同的图片构成.
每一个图标至少都有一个前景图片和一个阴影图片，阴影必须是前景图的45度视角的形状，并且左下角和前景图的左下角重叠，还必须是24-bit PNG灰度图片，才能刚好使图标看起来像站在地图上一样.
The GIcon 需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片，一下是指定一个图标的最基本的代码：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);
,Google Map Api文档,免费Google地图API使用说明
The GIcon 类提供有超过7个的属性必须设置以保证图标在浏览器上的兼容性和功能. 比如imageMap 属性指定图标不透明部分的形状，如果你没有设置这个属性，在Firefox/Mozilla浏览器上，整个图标(包括透明部分) 都能被点击. 看这个GIcon 类参考了解更多信息
折线
GPolyline 构造函数使用一组地理点最为参数，你也能指定颜色、线宽和透明度 颜色采用老的HTML 样式，比
如"#ff0000". GPolyline 不支持直接使用颜色名字. 例如以下代码会创建一个10像素宽的红色线段：
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
,Google Map Api文档,免费Google地图API使用说明GMap(container,mapTypes?, width?,height?) 型([G_MAP_TYPE, G_SATELLITE_TYPE]) Creates a new map inside 同样的，如果没有严格指
定大小，则会使用HTML 容器的大小.
方法
Configuration
方法
enableDragging()
disableDragging()
draggingEnabled()
enableInfoWindow()说明启用动态托拽 (默认已经启用) 禁止动态托拽如果动态托拽启用，则返回true 启用信息浮窗 (默认已经启用) disableInfoWindow()禁止信息浮窗 windows on this mapinfoWindowEnabled()如果信息浮窗启用，则返回true Controls
addControl(control)将给定控件添加到地图removeControl(control)从地图上移除相应控件State
方法
getCenterLatLng()
getBoundsLatLng()
getSpanLatLng()
getZoomLevel()
centerAtLatLng(latLng)
recenterOrPanToLatLng(latLng)
zoomTo(zoomLevel)说明返回地图中心点经/纬坐标返回地图视口边界 bounds(经/纬坐标) 返回地图视口宽度和高度(用精度和纬度作坐标) 返回地图的缩放级别将地图中心定位到指定GPoint 将地图中心定位到指定GPoint ，如果指定点在视口之中，则执行平滑过渡动作缩放到指定的等级，如果指定的等级超出范围，则请求会被忽略. centerAndZoom(latLng, zoomLevel)自动定位和缩放地图getMapTypes()
getCurrentMapType()
setMapType(mapType)返回所有支持的地图类型的数组(例如G_MAP_TYPE和G_SATELLITE_TYPE) 返回当前使用的地图类型(例如G_MAP_TYPE或G_SATELLITE_TYPE) 切换到指定的地图类型(例如G_MAP_TYPE或G_SATELLITE_TYPE) Overlays
方法
addOverlay(overlay)说明将指定的标注 (例如GMarker 或GPolyline ) 添加到地图removeOverlay(overlay)从地图上移除指定的标注clearOverlays()删除所有地图上的标注