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 現(xiàn)在兼容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 標簽時，瀏覽器會使用" 標準兼容模式" 來處理頁面， 這將使頁面能更好的跨越瀏覽器執(zhí)行.
同樣，如果你需要在地圖上包含折線，你需要為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 出現(xiàn)了重要的升級，會增加這個版本號并且在Google Code和Maps API討論組上面發(fā)布公告.
Google 會同時運行新版和舊版一個月左右，隨后舊版就會被關閉.
地圖工作小組會在修復BUG 或改善性能之后隨時更新API ，這些更新僅僅是為了改善性能和修復錯誤，不過在這個工程之中也可能發(fā)生影響API 連接的情況 如果這樣的事情發(fā)生，你可以到Maps API discussion group報告你遇到的情況地理、行程和其他
Google Maps API現(xiàn)在并不包含地理和 行程服務, 可在網上有許多關于free geocoders的相關內容.
應用范例
一個簡單例子
創(chuàng)建一個在所在層中居中的地圖
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(simple.html)
地圖的移動和變換
,Google Map Api文檔,免費Google地圖API使用說明
recenterOrPanToLatLng 方法進行一個地圖變換，目標點經/緯在當前視口之中時執(zhí)行一個連續(xù)的動作，否則，執(zhí)行不連續(xù)的變換動作
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 (用來在地圖和衛(wèi)星圖模式間切換) 兩個控件.
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 用來注冊事件監(jiān)視器，在這個例子中，在用戶移動或拖拽地圖后，輸出地圖中心點的經/緯. 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)
地圖標注
本范例通過創(chuàng)建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)
響應用戶點擊
本范例在用戶點擊地圖時，在相應的點創(chuàng)建一個標記，用戶點擊標記時，移除這個標記. 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使用說明
創(chuàng)建圖標
創(chuàng)建一種新圖標, 就像在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)
使用圖標類
多數(shù)情況下，使用的圖標可能前景圖片不同，可是形狀和陰影是一樣的，達到這種效果最簡單的方法是使用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")
在這個范例中，我們下載一個靜態(tài)文件("data.xml")，這個XML 文件中包含一系列經/緯坐標，當下載完成后，讀取這個XML 文件并為每一個坐標在地圖上創(chuàng)建一個標記.
// 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 的每一個實例表現(xiàn)為頁面上的一個地圖，可以創(chuàng)建這個類的多個實例 每個地圖被包含在一個container 之中，比如一個DIV 標簽，除非明確指定，地圖將使用相應container 的大小.
GMap 類提供了操作地圖點(中心和縮放度) 和添加刪除標記(比如GMarker 和GPolyline 實例) 和方法. 同時也提供了一個打開" 信息浮窗" 的方法，地圖上同時只能有一個信息浮窗.
更多信息請參看GMap 類參考
,Google Map Api文檔,免費Google地圖API使用說明
事件
利用事件監(jiān)視器，你可以在程序中加入動態(tài)的內容，每個實例提供一些指定的事件，你的程序可以利用靜態(tài)方
法GEvent.addListener 或GEvent.bind 監(jiān)視這些事件. 例如，以下代碼片斷在每次用戶點擊地圖的時候顯示一個警告:var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
alert("You clicked the map");
});
GEvent.addListener 使用一個函數(shù)作為第三個參數(shù)，這個函數(shù)作為事件處理器，在事件被觸發(fā)時運行. 如果想綁定一個對象的方法到事件，可以使用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 節(jié)點作為參數(shù)，這個HTML 節(jié)點被添加到信息浮窗容器里面，并顯示在相應點處.
openInfoWindowHtml 差不多，但是它使用HTML 字符串作為參數(shù). openInfoWindowXslt 則利用XML 節(jié)點和XSLT 文檔的URL 地址來生成信息浮窗內容，如果該XSLT 文檔還沒有被下載，則會自動異步下載此文件.
如果需要在標記上顯示信息浮窗，你可以傳遞第三個參數(shù)(可選) 給出窗口頂端和給定點位置的像素差. 比如你的標記高度是10px, 你可以使用GSize(0,-10)作第三個參數(shù).
GMarker 類還提供了openInfoWindow 方法用來處理像素值內容，所以不用擔心在程序中計算像素的問題.
標注
標注是一些綁定到地理坐標的對象，當移動、縮放地圖或切換模式(比如從地圖到衛(wèi)星圖) 時，標注也會跟著變化. Maps API提供兩種標注:標記(地圖上的圖標) 和折線(根據(jù)地理位置繪制的折線)
圖標和標記
The GMarker 構造函數(shù)使用一個圖標和一個點作為參數(shù)，并提供一些類似" 點擊" 的事件，看這個創(chuàng)建標記的例子創(chuàng)建標記最困難的地方是指定圖標，復雜在于一個圖標需要幾個不同的圖片構成.
每一個圖標至少都有一個前景圖片和一個陰影圖片，陰影必須是前景圖的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 構造函數(shù)使用一組地理點最為參數(shù)，你也能指定顏色、線寬和透明度 顏色采用老的HTML 樣式，比
如"#ff0000". GPolyline 不支持直接使用顏色名字. 例如以下代碼會創(chuàng)建一個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()說明啟用動態(tài)托拽 (默認已經啟用) 禁止動態(tài)托拽如果動態(tài)托拽啟用，則返回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 ，如果指定點在視口之中，則執(zhí)行平滑過渡動作縮放到指定的等級，如果指定的等級超出范圍，則請求會被忽略. centerAndZoom(latLng, zoomLevel)自動定位和縮放地圖getMapTypes()
getCurrentMapType()
setMapType(mapType)返回所有支持的地圖類型的數(shù)組(例如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()刪除所有地圖上的標注