Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明

楊竹青

事件監(jiān)視
GEvent.addListener用來(lái)注冊(cè)事件監(jiān)視器，在這個(gè)例子中，在用戶移動(dòng)或拖拽地圖后，輸出地圖中心點(diǎn)的經(jīng)/緯.


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);

顯示信息浮窗
這個(gè)范例顯示一個(gè)指向地圖中心點(diǎn)的"Hello world"信息浮窗，這里信息浮窗顯示在指向點(diǎn)的上面，而實(shí)際上，信息窗能在地圖的任何地方顯示.


var map = new GMap(document.getElementById("map"));map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);map.openInfoWindow(map.getCenterLatLng(),document.createTextNode("Hello world"));

地圖標(biāo)注
本范例通過(guò)創(chuàng)建10個(gè)隨機(jī)的標(biāo)注和折線來(lái)說(shuō)明地圖標(biāo)注的用法.


// Center the map on Palo Altovar 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 iconvar 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));

響應(yīng)用戶點(diǎn)擊
本范例在用戶點(diǎn)擊地圖時(shí)，在相應(yīng)的點(diǎn)創(chuàng)建一個(gè)標(biāo)記，用戶點(diǎn)擊標(biāo)記時(shí)，移除這個(gè)標(biāo)記.


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));}});

在標(biāo)記上顯示信息浮窗
在這個(gè)例子中，點(diǎn)擊每一個(gè)標(biāo)記，就會(huì)在標(biāo)記上面顯示一個(gè)自定義的信息浮窗.


// Center the map on Palo Altovar 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 numberfunction createMarker(point, number) {var marker = new GMarker(point);// Show this marker's index in the info window when it is clickedvar html = "Marker #<b>" + number + "</b>";GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});return marker;}// Add 10 random markers in the map viewportvar 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);}

創(chuàng)建圖標(biāo)
創(chuàng)建一種新圖標(biāo),就像在Google Ride Finder上面使用的迷你標(biāo)記一樣.必須給圖標(biāo)指定前景圖片、陰影圖片、圖標(biāo)在地圖上的點(diǎn)和信息浮窗在圖標(biāo)上的點(diǎn).


// Create our "tiny" marker iconvar 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 Altovar 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 pointfunction 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 viewportvar 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()));}

使用圖標(biāo)類
多數(shù)情況下，使用的圖標(biāo)可能前景圖片不同，可是形狀和陰影是一樣的，達(dá)到這種效果最簡(jiǎn)單的方法是使用GIcon類的copy方法來(lái)構(gòu)造.這樣可以將一個(gè)Icon對(duì)象的所有屬性復(fù)制到一個(gè)新的Icon對(duì)象中.


// 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 Altovar 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 indexfunction createMarker(point, index) {// Create a lettered icon for this point using our icon class from abovevar 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 clickedvar html = "Marker <b>" + letter + "</b>";GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});return marker;}// Add 10 random markers in the map viewportvar 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和異步RPC ("AJAX")
在這個(gè)范例中，我們下載一個(gè)靜態(tài)文件("data.xml")，這個(gè)XML文件中包含一系列經(jīng)/緯坐標(biāo)，當(dāng)下載完成后，讀取這個(gè)XML文件并為每一個(gè)坐標(biāo)在地圖上創(chuàng)建一個(gè)標(biāo)記.


// Center the map on Palo Altovar 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.getAttribute("lng")),parseFloat(markers.getAttribute("lat")));var marker = new GMarker(point);map.addOverlay(marker);}}}request.send(null);

API 概要

GMap類
GMap的每一個(gè)實(shí)例表現(xiàn)為頁(yè)面上的一個(gè)地圖，可以創(chuàng)建這個(gè)類的多個(gè)實(shí)例 每個(gè)地圖被包含在一個(gè)container之中，比如一個(gè)DIV標(biāo)簽，除非明確指定，地圖將使用相應(yīng)container的大小.

GMap類提供了操作地圖點(diǎn)(中心和縮放度)和添加刪除標(biāo)記(比如GMarker和GPolyline實(shí)例)和方法. 同時(shí)也提供了一個(gè)打開(kāi)"信息浮窗"的方法，地圖上同時(shí)只能有一個(gè)信息浮窗.

更多信息請(qǐng)參看GMap類參考



事件
利用事件監(jiān)視器，你可以在程序中加入動(dòng)態(tài)的內(nèi)容，每個(gè)實(shí)例提供一些指定的事件，你的程序可以利用靜態(tài)方法GEvent.addListener或GEvent.bind監(jiān)視這些事件. 例如，以下代碼片斷在每次用戶點(diǎn)擊地圖的時(shí)候顯示一個(gè)警告:


var map = new GMap(document.getElementById("map"));GEvent.addListener(map, "click", function() {alert("You clicked the map");});GEvent.addListener使用一個(gè)函數(shù)作為第三個(gè)參數(shù)，這個(gè)函數(shù)作為事件處理器，在事件被觸發(fā)時(shí)運(yùn)行. 如果想綁定一個(gè)對(duì)象的方法到事件，可以使用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類有一個(gè)信息浮窗，可以在地圖上以浮動(dòng)窗口模式在地圖上顯示HTML內(nèi)容.

基本的浮動(dòng)窗口方法是openInfoWindow，這個(gè)方法以一個(gè)點(diǎn)和一個(gè)HTML節(jié)點(diǎn)作為參數(shù)，這個(gè)HTML節(jié)點(diǎn)被添加到信息浮窗容器里面，并顯示在相應(yīng)點(diǎn)處.

openInfoWindowHtml差不多，但是它使用HTML字符串作為參數(shù).openInfoWindowXslt則利用XML節(jié)點(diǎn)和XSLT文檔的URL地址來(lái)生成信息浮窗內(nèi)容，如果該XSLT文檔還沒(méi)有被下載，則會(huì)自動(dòng)異步下載此文件.

如果需要在標(biāo)記上顯示信息浮窗，你可以傳遞第三個(gè)參數(shù)(可選)給出窗口頂端和給定點(diǎn)位置的像素差. 比如你的標(biāo)記高度是10px,你可以使用GSize(0,-10)作第三個(gè)參數(shù).

GMarker類還提供了openInfoWindow方法用來(lái)處理像素值內(nèi)容，所以不用擔(dān)心在程序中計(jì)算像素的問(wèn)題.



標(biāo)注
標(biāo)注是一些綁定到地理坐標(biāo)的對(duì)象，當(dāng)移動(dòng)、縮放地圖或切換模式(比如從地圖到衛(wèi)星圖)時(shí)，標(biāo)注也會(huì)跟著變化.

Maps API提供兩種標(biāo)注:標(biāo)記(地圖上的圖標(biāo))和折線(根據(jù)地理位置繪制的折線)


圖標(biāo)和標(biāo)記
TheGMarker構(gòu)造函數(shù)使用一個(gè)圖標(biāo)和一個(gè)點(diǎn)作為參數(shù)，并提供一些類似"點(diǎn)擊"的事件，看這個(gè)創(chuàng)建標(biāo)記的例子

創(chuàng)建標(biāo)記最困難的地方是指定圖標(biāo)，復(fù)雜在于一個(gè)圖標(biāo)需要幾個(gè)不同的圖片構(gòu)成.

每一個(gè)圖標(biāo)至少都有一個(gè)前景圖片和一個(gè)陰影圖片，陰影必須是前景圖的45度視角的形狀，并且左下角和前景圖的左下角重疊，還必須是24-bit PNG灰度圖片，才能剛好使圖標(biāo)看起來(lái)像站在地圖上一樣.


TheGIcon需要指定圖標(biāo)使用的圖片文件的大小以便以合適的大小顯示這些圖片，一下是指定一個(gè)圖標(biāo)的最基本的代碼：


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);TheGIcon類提供有超過(guò)7個(gè)的屬性必須設(shè)置以保證圖標(biāo)在瀏覽器上的兼容性和功能. 比如imageMap屬性指定圖標(biāo)不透明部分的形狀，如果你沒(méi)有設(shè)置這個(gè)屬性，在Firefox/Mozilla瀏覽器上，整個(gè)圖標(biāo)(包括透明部分)都能被點(diǎn)擊. 看這個(gè)GIcon類參考了解更多信息



折線
GPolyline構(gòu)造函數(shù)使用一組地理點(diǎn)最為參數(shù)，你也能指定顏色、線寬和透明度 顏色采用老的HTML樣式，比如"#ff0000".GPolyline不支持直接使用顏色名字. 例如以下代碼會(huì)創(chuàng)建一個(gè)10像素寬的紅色線段：


var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),new GPoint(-122.1519, 37.4519)],"#ff0000", 10);map.addOverlay(polyline);

在IE瀏覽器中，我們用VML來(lái)繪制折線，而在其他的瀏覽器之中，我們使用Google服務(wù)器上的圖片，并在地圖變化時(shí)重新刷新圖片.



控件
addControl用來(lái)添加控件，Maps API可以讓你在地圖上使用如下控件：


GLargeMapControl在Google Map中使用的大縮放/定位控件
GSmallMapControl在Google Map中使用的小縮放/定位控件
GSmallZoomControl一個(gè)小的縮放控件(不能定位)，用在小窗口中顯示駕駛方向
GMapTypeControl地圖類型切換控件(如：地圖和衛(wèi)星圖)
例如，要在地圖上添加一個(gè)縮放/定位控件，你可以在地圖初始化時(shí)使用如下代碼：


map.addControl(new GLargeMapControl());這樣，控件就會(huì)被添加到地圖的左上角



XML和RPC
Google Maps API提供了一個(gè)創(chuàng)建XmlHttpRequest對(duì)象的方法，當(dāng)前可以在IE, Firefox, and Safari上運(yùn)行正常，如下：


var request = GXmlHttp.create();request.open('GET', "myfile.txt", true);request.onreadystatechange = function() {if (request.readyState == 4) {alert(request.responseText);}}request.send(null);你還可以使用靜態(tài)方法GXml.parse來(lái)解析一個(gè)XML文檔，使用XML字符串作為參數(shù)，這個(gè)方法對(duì)所有的瀏覽器兼容. 如果本地瀏覽器不支持XML解析，則會(huì)采用一個(gè)基于JavaScript的解析器，可是不能保證這個(gè)解析器一定能正常的解析.

注意Google Maps API不需要使用XML或XmlHttpRequest因?yàn)檫@是一個(gè)純JavaScript/DHTML的API