Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明 ,Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明 ,
Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
下面會(huì)講到如何給地圖實(shí)例添加和操作標(biāo)注.
瀏覽器兼容性
Google Maps并不是對(duì)每一個(gè)瀏覽器都兼容的， Google Maps 現(xiàn)在兼容Firefox/Mozilla, IE 5.5 , Safari
1.2 和Opera ，不支持IE 5.0.因?yàn)槊總€(gè)不兼容的瀏覽器的動(dòng)作又是不同的， 所以Maps API提供了一個(gè)全局的方法(GBrowserIsCompatible()) 來(lái)檢查瀏覽器兼容性， 但是并不自動(dòng)檢查. 引入的腳
本http://maps.google.com/maps?file=api&v=1可以在幾乎所有的瀏覽器中被正常解析， 所以你可以放心的在檢查瀏覽器兼容性之前引入該腳本.
在本文的所有例子之中，除了上面的一篇之外，其他的既沒(méi)有用GBrowserIsCompatible()檢查瀏覽器兼容性，也沒(méi)有給出任何錯(cuò)誤信息 正式使用的程序上應(yīng)該有更加友好的處理方法，這里為了讓這些例子更加易懂，而忽略了瀏覽器檢查. XHTML 和VML
建議你在需要使用地圖的網(wǎng)頁(yè)上使用標(biāo)準(zhǔn)的兼容性好的XHTML, 當(dāng)頁(yè)面頂端存在DOCTYPE 標(biāo)簽時(shí)，瀏覽器會(huì)使用" 標(biāo)準(zhǔn)兼容模式" 來(lái)處理頁(yè)面， 這將使頁(yè)面能更好的跨越瀏覽器執(zhí)行.
同樣，如果你需要在地圖上包含折線，你需要為IE 瀏覽器在頁(yè)面上引入VML 命名空間 這樣，你的文檔開(kāi)頭就應(yīng)該是這樣的：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
關(guān)于VML ，你可以在Microsoft's VML workshop查找更多信息.
API 更新
引入的JavaScript 文件URL http://maps.google.com/maps?file=api&v=1指向到 API 的" 版本1" ， 如果API 出現(xiàn)了重要的升級(jí)，會(huì)增加這個(gè)版本號(hào)并且在Google Code和Maps API討論組上面發(fā)布公告.
Google 會(huì)同時(shí)運(yùn)行新版和舊版一個(gè)月左右，隨后舊版就會(huì)被關(guān)閉.
地圖工作小組會(huì)在修復(fù)BUG 或改善性能之后隨時(shí)更新API ，這些更新僅僅是為了改善性能和修復(fù)錯(cuò)誤，不過(guò)在這個(gè)工程之中也可能發(fā)生影響API 連接的情況 如果這樣的事情發(fā)生，你可以到Maps API discussion group報(bào)告你遇到的情況地理、行程和其他
Google Maps API現(xiàn)在并不包含地理和 行程服務(wù), 可在網(wǎng)上有許多關(guān)于free geocoders的相關(guān)內(nèi)容.
應(yīng)用范例
一個(gè)簡(jiǎn)單例子
創(chuàng)建一個(gè)在所在層中居中的地圖
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(simple.html)
地圖的移動(dòng)和變換
,Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
recenterOrPanToLatLng 方法進(jìn)行一個(gè)地圖變換，目標(biāo)點(diǎn)經(jīng)/緯在當(dāng)前視口之中時(shí)執(zhí)行一個(gè)連續(xù)的動(dòng)作，否則，執(zhí)行不連續(xù)的變換動(dòng)作
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 (用來(lái)縮放和移動(dòng)圖片) 和GMapTypeControl (用來(lái)在地圖和衛(wèi)星圖模式間切換) 兩個(gè)控件.
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)
事件監(jiān)視
GEvent.addListener 用來(lái)注冊(cè)事件監(jiān)視器，在這個(gè)例子中，在用戶(hù)移動(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);
查看范例(event.html)
顯示信息浮窗
這個(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"));
查看范例(infowindow.html)
地圖標(biāo)注
本范例通過(guò)創(chuàng)建10個(gè)隨機(jī)的標(biāo)注和折線來(lái)說(shuō)明地圖標(biāo)注的用法.
// 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文檔,免費(fèi)Google地圖API使用說(shuō)明
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)
響應(yīng)用戶(hù)點(diǎn)擊
本范例在用戶(hù)點(diǎn)擊地圖時(shí)，在相應(yīng)的點(diǎn)創(chuàng)建一個(gè)標(biāo)記，用戶(hù)點(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));
}
});
查看范例(click.html)
在標(biāo)記上顯示信息浮窗
在這個(gè)例子中，點(diǎn)擊每一個(gè)標(biāo)記，就會(huì)在標(biāo)記上面顯示一個(gè)自定義的信息浮窗.
// 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文檔,免費(fèi)Google地圖API使用說(shuō)明
創(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 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)
使用圖標(biāo)類(lèi)
多數(shù)情況下，使用的圖標(biāo)可能前景圖片不同，可是形狀和陰影是一樣的，達(dá)到這種效果最簡(jiǎn)單的方法是使用GIcon 類(lèi)的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 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文檔,免費(fèi)Google地圖API使用說(shuō)明
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")
在這個(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 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 類(lèi)
GMap 的每一個(gè)實(shí)例表現(xiàn)為頁(yè)面上的一個(gè)地圖，可以創(chuàng)建這個(gè)類(lèi)的多個(gè)實(shí)例 每個(gè)地圖被包含在一個(gè)container 之中，比如一個(gè)DIV 標(biāo)簽，除非明確指定，地圖將使用相應(yīng)container 的大小.
GMap 類(lèi)提供了操作地圖點(diǎn)(中心和縮放度) 和添加刪除標(biāo)記(比如GMarker 和GPolyline 實(shí)例) 和方法. 同時(shí)也提供了一個(gè)打開(kāi)" 信息浮窗" 的方法，地圖上同時(shí)只能有一個(gè)信息浮窗.
更多信息請(qǐng)參看GMap 類(lèi)參考
,Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
事件
利用事件監(jiān)視器，你可以在程序中加入動(dòng)態(tài)的內(nèi)容，每個(gè)實(shí)例提供一些指定的事件，你的程序可以利用靜態(tài)方
法GEvent.addListener 或GEvent.bind 監(jiān)視這些事件. 例如，以下代碼片斷在每次用戶(hù)點(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 類(lèi)有一個(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 類(lèi)還提供了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)記
The GMarker 構(gòu)造函數(shù)使用一個(gè)圖標(biāo)和一個(gè)點(diǎn)作為參數(shù)，并提供一些類(lèi)似" 點(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)像站在地圖上一樣.
The GIcon 需要指定圖標(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);
,Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明
The GIcon 類(lèi)提供有超過(guò)7個(gè)的屬性必須設(shè)置以保證圖標(biāo)在瀏覽器上的兼容性和功能. 比如imageMap 屬性指定圖標(biāo)不透明部分的形狀，如果你沒(méi)有設(shè)置這個(gè)屬性，在Firefox/Mozilla瀏覽器上，整個(gè)圖標(biāo)(包括透明部分) 都能被點(diǎn)擊. 看這個(gè)GIcon 類(lèi)參考了解更多信息
折線
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),
,Google Map Api文檔,免費(fèi)Google地圖API使用說(shuō)明GMap(container,mapTypes?, width?,height?) 型([G_MAP_TYPE, G_SATELLITE_TYPE]) Creates a new map inside 同樣的，如果沒(méi)有嚴(yán)格指
定大小，則會(huì)使用HTML 容器的大小.
方法
Configuration
方法
enableDragging()
disableDragging()
draggingEnabled()
enableInfoWindow()說(shuō)明啟用動(dòng)態(tài)托拽 (默認(rèn)已經(jīng)啟用) 禁止動(dòng)態(tài)托拽如果動(dòng)態(tài)托拽啟用，則返回true 啟用信息浮窗 (默認(rèn)已經(jīng)啟用) disableInfoWindow()禁止信息浮窗 windows on this mapinfoWindowEnabled()如果信息浮窗啟用，則返回true Controls
addControl(control)將給定控件添加到地圖removeControl(control)從地圖上移除相應(yīng)控件State
方法
getCenterLatLng()
getBoundsLatLng()
getSpanLatLng()
getZoomLevel()
centerAtLatLng(latLng)
recenterOrPanToLatLng(latLng)
zoomTo(zoomLevel)說(shuō)明返回地圖中心點(diǎn)經(jīng)/緯坐標(biāo)返回地圖視口邊界 bounds(經(jīng)/緯坐標(biāo)) 返回地圖視口寬度和高度(用精度和緯度作坐標(biāo)) 返回地圖的縮放級(jí)別將地圖中心定位到指定GPoint 將地圖中心定位到指定GPoint ，如果指定點(diǎn)在視口之中，則執(zhí)行平滑過(guò)渡動(dòng)作縮放到指定的等級(jí)，如果指定的等級(jí)超出范圍，則請(qǐng)求會(huì)被忽略. centerAndZoom(latLng, zoomLevel)自動(dòng)定位和縮放地圖getMapTypes()
getCurrentMapType()
setMapType(mapType)返回所有支持的地圖類(lèi)型的數(shù)組(例如G_MAP_TYPE和G_SATELLITE_TYPE) 返回當(dāng)前使用的地圖類(lèi)型(例如G_MAP_TYPE或G_SATELLITE_TYPE) 切換到指定的地圖類(lèi)型(例如G_MAP_TYPE或G_SATELLITE_TYPE) Overlays
方法
addOverlay(overlay)說(shuō)明將指定的標(biāo)注 (例如GMarker 或GPolyline ) 添加到地圖removeOverlay(overlay)從地圖上移除指定的標(biāo)注clearOverlays()刪除所有地圖上的標(biāo)注