免费Google地图API使用说明(转)
生活随笔
收集整理的這篇文章主要介紹了
免费Google地图API使用说明(转)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉自：http://www.cnblogs.com/mypig/articles/1936154.html
| 01 | 事件監視 |
| 02 | ?? |
| 03 | GEvent.addListener用來注冊事件監視器，在這個例子中，在用戶移動或拖拽地圖后，輸出地圖中心點的經/緯. |
| 04 | ?? |
| 05 | ?? |
| 06 | var map = new GMap(document.getElementById("map")); |
| 07 | GEvent.addListener(map, "moveend", function() { |
| 08 | var center = map.getCenterLatLng(); |
| 09 | var latLngStr = '(' + center.y + ', ' + center.x + ')'; |
| 10 | document.getElementById("message").innerHTML = latLngStr; |
| 11 | }); |
| 12 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
?
view sourceprint?| 1 | 顯示信息浮窗 |
| 2 | ?? |
| 3 | 這個范例顯示一個指向地圖中心點的"Hello world"信息浮窗，這里信息浮窗顯示在指向點的上面，而實際上，信息窗能在地圖的任何地方顯示. |
| 4 | ?? |
| 5 | ?? |
| 6 | var map = new GMap(document.getElementById("map")); |
| 7 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 8 | map.openInfoWindow(map.getCenterLatLng(), |
| 9 | document.createTextNode("Hello world")); |
?
view sourceprint?| 01 | 地圖標注 |
| 02 | ?? |
| 03 | 本范例通過創建10個隨機的標注和折線來說明地圖標注的用法. |
| 04 | ?? |
| 05 | ?? |
| 06 | // Center the map on Palo Alto |
| 07 | var map = new GMap(document.getElementById("map")); |
| 08 | map.addControl(new GSmallMapControl()); |
| 09 | map.addControl(new GMapTypeControl()); |
| 10 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 11 | ?? |
| 12 | // Add 10 random markers in the map viewport using the default icon |
| 13 | var bounds = map.getBoundsLatLng(); |
| 14 | var width = bounds.maxX - bounds.minX; |
| 15 | var height = bounds.maxY - bounds.minY; |
| 16 | for (var i = 0; i < 10; i++) { |
| 17 | var point = new GPoint(bounds.minX + width * Math.random(), |
| 18 | bounds.minY + height * Math.random()); |
| 19 | var marker = new GMarker(point); |
| 20 | map.addOverlay(marker); |
| 21 | } |
| 22 | ?? |
| 23 | // Add a polyline with 4 random points. Sort the points by longitude so that |
| 24 | // the line does not intersect itself. |
| 25 | var points = []; |
| 26 | for (var i = 0; i < 5; i++) { |
| 27 | points.push(new GPoint(bounds.minX + width * Math.random(), |
| 28 | bounds.minY + height * Math.random())); |
| 29 | } |
| 30 | points.sort(function(p1, p2) { return p1.x - p2.x; }); |
| 31 | map.addOverlay(new GPolyline(points)); |
?
view sourceprint?| 01 | 響應用戶點擊 |
| 02 | ?? |
| 03 | 本范例在用戶點擊地圖時，在相應的點創建一個標記，用戶點擊標記時，移除這個標記. |
| 04 | ?? |
| 05 | ?? |
| 06 | var map = new GMap(document.getElementById("map")); |
| 07 | map.addControl(new GSmallMapControl()); |
| 08 | map.addControl(new GMapTypeControl()); |
| 09 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 10 | ?? |
| 11 | GEvent.addListener(map, 'click', function(overlay, point) { |
| 12 | if (overlay) { |
| 13 | map.removeOverlay(overlay); |
| 14 | } else if (point) { |
| 15 | map.addOverlay(new GMarker(point)); |
| 16 | } |
| 17 | }); |
?
view sourceprint?| 01 | 在標記上顯示信息浮窗 |
| 02 | ?? |
| 03 | 在這個例子中，點擊每一個標記，就會在標記上面顯示一個自定義的信息浮窗. |
| 04 | ?? |
| 05 | ?? |
| 06 | // Center the map on Palo Alto |
| 07 | var map = new GMap(document.getElementById("map")); |
| 08 | map.addControl(new GSmallMapControl()); |
| 09 | map.addControl(new GMapTypeControl()); |
| 10 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 11 | ?? |
| 12 | // Creates a marker whose info window displays the given number |
| 13 | function createMarker(point, number) { |
| 14 | var marker = new GMarker(point); |
| 15 | ?? |
| 16 | // Show this marker's index in the info window when it is clicked |
| 17 | var html = "Marker #<b>" + number + "</b>"; |
| 18 | GEvent.addListener(marker, "click", function() { |
| 19 | marker.openInfoWindowHtml(html); |
| 20 | }); |
| 21 | ?? |
| 22 | return marker; |
| 23 | } |
| 24 | ?? |
| 25 | // Add 10 random markers in the map viewport |
| 26 | var bounds = map.getBoundsLatLng(); |
| 27 | var width = bounds.maxX - bounds.minX; |
| 28 | var height = bounds.maxY - bounds.minY; |
| 29 | for (var i = 0; i < 10; i++) { |
| 30 | var point = new GPoint(bounds.minX + width * Math.random(), |
| 31 | bounds.minY + height * Math.random()); |
| 32 | var marker = createMarker(point, i + 1); |
| 33 | map.addOverlay(marker); |
| 34 | } |
?
view sourceprint?| 01 | 創建圖標 |
| 02 | ?? |
| 03 | 創建一種新圖標,就像在Google Ride Finder上面使用的迷你標記一樣.必須給圖標指定前景圖片、陰影圖片、圖標在地圖上的點和信息浮窗在圖標上的點. |
| 04 | ?? |
| 05 | ?? |
| 06 | // Create our "tiny" marker icon |
| 07 | var icon = new GIcon(); |
| 08 | icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; |
| 09 | icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; |
| 10 | icon.iconSize = new GSize(12, 20); |
| 11 | icon.shadowSize = new GSize(22, 20); |
| 12 | icon.iconAnchor = new GPoint(6, 20); |
| 13 | icon.infoWindowAnchor = new GPoint(5, 1); |
| 14 | ?? |
| 15 | // Center the map on Palo Alto |
| 16 | var map = new GMap(document.getElementById("map")); |
| 17 | map.addControl(new GSmallMapControl()); |
| 18 | map.addControl(new GMapTypeControl()); |
| 19 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 20 | ?? |
| 21 | // Creates one of our tiny markers at the given point |
| 22 | function createMarker(point) { |
| 23 | var marker = new GMarker(point, icon); |
| 24 | map.addOverlay(marker); |
| 25 | GEvent.addListener(marker, "click", function() { |
| 26 | marker.openInfoWindowHtml("You clicked me!"); |
| 27 | }); |
| 28 | } |
| 29 | ?? |
| 30 | // Place the icons randomly in the map viewport |
| 31 | var bounds = map.getBoundsLatLng(); |
| 32 | var width = bounds.maxX - bounds.minX; |
| 33 | var height = bounds.maxY - bounds.minY; |
| 34 | for (var i = 0; i < 10; i++) { |
| 35 | createMarker(new GPoint(bounds.minX + width * Math.random(), |
| 36 | bounds.minY + height * Math.random())); |
| 37 | } |
?
view sourceprint?| 01 | 使用圖標類 |
| 02 | ?? |
| 03 | 多數情況下，使用的圖標可能前景圖片不同，可是形狀和陰影是一樣的，達到這種效果最簡單的方法是使用GIcon類的copy方法來構造.這樣可以將一個Icon對象的所有屬性復制到一個新的Icon對象中. |
| 04 | ?? |
| 05 | ?? |
| 06 | // Create a base icon for all of our markers that specifies the shadow, icon |
| 07 | // dimensions, etc. |
| 08 | var baseIcon = new GIcon(); |
| 09 | baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; |
| 10 | baseIcon.iconSize = new GSize(20, 34); |
| 11 | baseIcon.shadowSize = new GSize(37, 34); |
| 12 | baseIcon.iconAnchor = new GPoint(9, 34); |
| 13 | baseIcon.infoWindowAnchor = new GPoint(9, 2); |
| 14 | baseIcon.infoShadowAnchor = new GPoint(18, 25); |
| 15 | ?? |
| 16 | // Center the map on Palo Alto |
| 17 | var map = new GMap(document.getElementById("map")); |
| 18 | map.addControl(new GSmallMapControl()); |
| 19 | map.addControl(new GMapTypeControl()); |
| 20 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 21 | ?? |
| 22 | // Creates a marker whose info window displays the letter corresponding to |
| 23 | // the given index |
| 24 | function createMarker(point, index) { |
| 25 | // Create a lettered icon for this point using our icon class from above |
| 26 | var letter = String.fromCharCode("A".charCodeAt(0) + index); |
| 27 | var icon = new GIcon(baseIcon); |
| 28 | icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; |
| 29 | var marker = new GMarker(point, icon); |
| 30 | ?? |
| 31 | // Show this marker's index in the info window when it is clicked |
| 32 | var html = "Marker <b>" + letter + "</b>"; |
| 33 | GEvent.addListener(marker, "click", function() { |
| 34 | marker.openInfoWindowHtml(html); |
| 35 | }); |
| 36 | ?? |
| 37 | return marker; |
| 38 | } |
| 39 | ?? |
| 40 | // Add 10 random markers in the map viewport |
| 41 | var bounds = map.getBoundsLatLng(); |
| 42 | var width = bounds.maxX - bounds.minX; |
| 43 | var height = bounds.maxY - bounds.minY; |
| 44 | for (var i = 0; i < 10; i++) { |
| 45 | var point = new GPoint(bounds.minX + width * Math.random(), |
| 46 | bounds.minY + height * Math.random()); |
| 47 | var marker = createMarker(point, i); |
| 48 | map.addOverlay(marker); |
| 49 | } |
?
view sourceprint?| 01 | 在地圖上使用XML和異步RPC ("AJAX") |
| 02 | ?? |
| 03 | 在這個范例中，我們下載一個靜態文件("data.xml")，這個XML文件中包含一系列經/緯坐標，當下載完成后，讀取這個XML文件并為每一個坐標在地圖上創建一個標記. |
| 04 | ?? |
| 05 | ?? |
| 06 | // Center the map on Palo Alto |
| 07 | var map = new GMap(document.getElementById("map")); |
| 08 | map.addControl(new GSmallMapControl()); |
| 09 | map.addControl(new GMapTypeControl()); |
| 10 | map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); |
| 11 | ?? |
| 12 | // Download the data in data.xml and load it on the map. The format we |
| 13 | // expect is: |
| 14 | // <markers> |
| 15 | //?? <marker lat="37.441" lng="-122.141"/> |
| 16 | //?? <marker lat="37.322" lng="-121.213"/> |
| 17 | // </markers> |
| 18 | var request = GXmlHttp.create(); |
| 19 | request.open("GET", "data.xml", true); |
| 20 | request.onreadystatechange = function() { |
| 21 | if (request.readyState == 4) { |
| 22 | var xmlDoc = request.responseXML; |
| 23 | var markers = xmlDoc.documentElement.getElementsByTagName("marker"); |
| 24 | for (var i = 0; i < markers.length; i++) { |
| 25 | var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), |
| 26 | parseFloat(markers[i].getAttribute("lat"))); |
| 27 | var marker = new GMarker(point); |
| 28 | map.addOverlay(marker); |
| 29 | } |
| 30 | } |
| 31 | } |
| 32 | request.send(null); |
?
view sourceprint?| 001 | API 概要 |
| 002 | ?? |
| 003 | ?? |
| 004 | GMap類 |
| 005 | ?? |
| 006 | GMap的每一個實例表現為頁面上的一個地圖，可以創建這個類的多個實例 每個地圖被包含在一個container之中，比如一個DIV標簽，除非明確指定，地圖將使用相應container的大小. |
| 007 | ?? |
| 008 | GMap類提供了操作地圖點(中心和縮放度)和添加刪除標記(比如GMarker和GPolyline實例)和方法. 同時也提供了一個打開"信息浮窗"的方法，地圖上同時只能有一個信息浮窗. |
| 009 | ?? |
| 010 | 更多信息請參看GMap類參考 |
| 011 | ?? |
| 012 | ?? |
| 013 | ?? |
| 014 | 事件 |
| 015 | ?? |
| 016 | 利用事件監視器，你可以在程序中加入動態的內容，每個實例提供一些指定的事件，你的程序可以利用靜態方法GEvent.addListener或GEvent.bind監視這些事件. 例如，以下代碼片斷在每次用戶點擊地圖的時候顯示一個警告: |
| 017 | ?? |
| 018 | ?? |
| 019 | var map = new GMap(document.getElementById("map")); |
| 020 | GEvent.addListener(map, "click", function() { |
| 021 | alert("You clicked the map"); |
| 022 | }); |
| 023 | GEvent.addListener使用一個函數作為第三個參數，這個函數作為事件處理器，在事件被觸發時運行. 如果想綁定一個對象的方法到事件，可以使用GEvent.bind.例如： |
| 024 | ?? |
| 025 | ?? |
| 026 | function MyApplication() { |
| 027 | this.counter = 0; |
| 028 | this.map = new GMap(document.getElementById("map")); |
| 029 | GEvent.bind(this.map, "click", this, this.onMapClick); |
| 030 | } |
| 031 | ?? |
| 032 | MyApplication.prototype.onMapClick() { |
| 033 | this.counter++; |
| 034 | alert("You have clicked the map " + this.counter + |
| 035 | this.counter == 1 ?" time.":" times."); |
| 036 | } |
| 037 | ?? |
| 038 | var application = new MyApplication(); |
| 039 | ?? |
| 040 | ?? |
| 041 | 信息浮窗 |
| 042 | ?? |
| 043 | Map類有一個信息浮窗，可以在地圖上以浮動窗口模式在地圖上顯示HTML內容. |
| 044 | ?? |
| 045 | 基本的浮動窗口方法是openInfoWindow，這個方法以一個點和一個HTML節點作為參數，這個HTML節點被添加到信息浮窗容器里面，并顯示在相應點處. |
| 046 | ?? |
| 047 | openInfoWindowHtml差不多，但是它使用HTML字符串作為參數.openInfoWindowXslt則利用XML節點和XSLT文檔的URL地址來生成信息浮窗內容，如果該XSLT文檔還沒有被下載，則會自動異步下載此文件. |
| 048 | ?? |
| 049 | 如果需要在標記上顯示信息浮窗，你可以傳遞第三個參數(可選)給出窗口頂端和給定點位置的像素差. 比如你的標記高度是10px,你可以使用GSize(0,-10)作第三個參數. |
| 050 | ?? |
| 051 | GMarker類還提供了openInfoWindow方法用來處理像素值內容，所以不用擔心在程序中計算像素的問題. |
| 052 | ?? |
| 053 | ?? |
| 054 | ?? |
| 055 | 標注 |
| 056 | ?? |
| 057 | 標注是一些綁定到地理坐標的對象，當移動、縮放地圖或切換模式(比如從地圖到衛星圖)時，標注也會跟著變化. |
| 058 | ?? |
| 059 | Maps API提供兩種標注:標記(地圖上的圖標)和折線(根據地理位置繪制的折線) |
| 060 | ?? |
| 061 | ?? |
| 062 | 圖標和標記 |
| 063 | ?? |
| 064 | TheGMarker構造函數使用一個圖標和一個點作為參數，并提供一些類似"點擊"的事件，看這個創建標記的例子 |
| 065 | ?? |
| 066 | 創建標記最困難的地方是指定圖標，復雜在于一個圖標需要幾個不同的圖片構成. |
| 067 | ?? |
| 068 | 每一個圖標至少都有一個前景圖片和一個陰影圖片，陰影必須是前景圖的45度視角的形狀，并且左下角和前景圖的左下角重疊，還必須是24-bit PNG灰度圖片，才能剛好使圖標看起來像站在地圖上一樣. |
| 069 | ?? |
| 070 | ?? |
| 071 | TheGIcon需要指定圖標使用的圖片文件的大小以便以合適的大小顯示這些圖片，一下是指定一個圖標的最基本的代碼： |
| 072 | ?? |
| 073 | ?? |
| 074 | var icon = new GIcon(); |
| 075 | icon.image = "http://www.google.com/mapfiles/marker.png"; |
| 076 | icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; |
| 077 | icon.iconSize = new GSize(20, 34); |
| 078 | icon.shadowSize = new GSize(37, 34); |
| 079 | TheGIcon類提供有超過7個的屬性必須設置以保證圖標在瀏覽器上的兼容性和功能. 比如imageMap屬性指定圖標不透明部分的形狀，如果你沒有設置這個屬性，在Firefox/Mozilla瀏覽器上，整個圖標(包括透明部分)都能被點擊. 看這個GIcon類參考了解更多信息 |
| 080 | ?? |
| 081 | ?? |
| 082 | ?? |
| 083 | 折線 |
| 084 | ?? |
| 085 | GPolyline構造函數使用一組地理點最為參數，你也能指定顏色、線寬和透明度 顏色采用老的HTML樣式，比如"#ff0000".GPolyline不支持直接使用顏色名字. 例如以下代碼會創建一個10像素寬的紅色線段： |
| 086 | ?? |
| 087 | ?? |
| 088 | var polyline = new GPolyline([new GPoint(-122.1419, 37.4419), |
| 089 | new GPoint(-122.1519, 37.4519)], |
| 090 | "#ff0000", 10); |
| 091 | map.addOverlay(polyline); |
| 092 | ?? |
| 093 | 在IE瀏覽器中，我們用VML來繪制折線，而在其他的瀏覽器之中，我們使用Google服務器上的圖片，并在地圖變化時重新刷新圖片. |
| 094 | ?? |
| 095 | ?? |
| 096 | ?? |
| 097 | 控件 |
| 098 | ?? |
| 099 | addControl用來添加控件，Maps API可以讓你在地圖上使用如下控件： |
| 100 | ?? |
| 101 | ?? |
| 102 | GLargeMapControl在Google Map中使用的大縮放/定位控件 |
| 103 | GSmallMapControl在Google Map中使用的小縮放/定位控件 |
| 104 | GSmallZoomControl一個小的縮放控件(不能定位)，用在小窗口中顯示駕駛方向 |
| 105 | GMapTypeControl地圖類型切換控件(如：地圖和衛星圖) |
| 106 | 例如，要在地圖上添加一個縮放/定位控件，你可以在地圖初始化時使用如下代碼： |
| 107 | ?? |
| 108 | ?? |
| 109 | map.addControl(new GLargeMapControl()); |
| 110 | 這樣，控件就會被添加到地圖的左上角 |
| 111 | ?? |
| 112 | ?? |
| 113 | ?? |
| 114 | XML和RPC |
| 115 | ?? |
| 116 | Google Maps API提供了一個創建XmlHttpRequest對象的方法，當前可以在IE, Firefox, and Safari上運行正常，如下： |
| 117 | ?? |
| 118 | ?? |
| 119 | var request = GXmlHttp.create(); |
| 120 | request.open('GET', "myfile.txt", true); |
| 121 | request.onreadystatechange = function() { |
| 122 | if (request.readyState == 4) { |
| 123 | alert(request.responseText); |
| 124 | } |
| 125 | } |
| 126 | request.send(null); |
| 127 | 你還可以使用靜態方法GXml.parse來解析一個XML文檔，使用XML字符串作為參數，這個方法對所有的瀏覽器兼容. 如果本地瀏覽器不支持XML解析，則會采用一個基于JavaScript的解析器，可是不能保證這個解析器一定能正常的解析. |
| 128 | ?? |
| 129 | 注意Google Maps API不需要使用XML或XmlHttpRequest因為這是一個純JavaScript/DHTML的API. |
?
?
google: api
http://code.google.com/intl/zh-CN/apis/maps/index.html?
Google:demo
http://www.google.com/apis/maps/demo/
地理學習小游戲
五岳名山您一定聽說過，但您還記得它們分別在哪里嗎？ 在這個小游戲中，您可以根據給出地理名詞，將對應的標注拖拽到地圖中恰當的位置上。當您完成后， 請點擊“評判”，程序將自動判斷您的回答是否正確，并給出成績。同時，在查看答案的模式下， 點擊標注還將彈出該景點的介紹。多練習幾次，Google 地圖 API 定能讓您對它們的位置了如指掌！
多點測距尺
想知道地球上任意兩個地點距離多遠？想知道您上班走了多遠的路？有了Google 地圖 API，您可以 輕而易舉地給地圖添加標注和路徑，并實現自己的“測距尺”。在這個例子中，您還可以隨意地修改現有路徑， 甚至將“測距尺”包裝成自定義的 Google 地圖 API控件，和別人分享。
神奇的放大鏡
這個放大鏡可不是簡單地將地圖的局部放大：透過它，您能夠看到地圖上更多的細節。事實上，這是通過 兩個獨立的、顯示不同縮放級別的地圖控件實現的。只有想不到，沒有做不到。如果您熟悉 javascript， Google 地圖 API 還有很多新奇的功能等待您的發現！
開發人員指南：
查看示例
?
http://code.google.com/intl/zh-CN/apis/maps/documentation/premier/guide.html#MapsJS
開始編寫 hello world：
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/tutorial.html
?
查看示例
?
查看示例
?
Google Maps JavaScript API V3 演示庫
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/demogallery.html
?
地圖疊加層
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html
?
?
轉載于:https://www.cnblogs.com/millen/archive/2011/04/19/2020500.html
總結
以上是生活随笔為你收集整理的免费Google地图API使用说明(转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dc概论之IO约束
- 下一篇： Muduo 网络编程示例之五： 测量两台