谷歌地图开发之入门
現在lbs搞的紅火的很，基于地圖的交友購物交通服務更是多如牛毛，幾天就主要對谷歌地圖開發一點初步，另外發現mapabc的開發接口很是詳細，如果不是
谷歌地圖的話，感覺mapabc更容易入門，有很多現成的代碼，學習起來更容易，對一些復雜的開發比較適合，例如房地產等開發，不過谷歌地圖比較主流，一些簡單的
開發還是比較好的使用，官方手冊是最好的學習資料http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html，下面就以
Google Maps JavaScript API V3 為例
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script> <script type="text/javascript">function initialize() {var latlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}</script> </head> <body οnlοad="initialize()"><div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
即使在這個簡單的示例中，也有幾點需要注意：
下文說明了這些步驟。
載入 Google Maps API
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>http://maps.google.com/maps/api/js?網址指向 Javascript 文件所在的位置，該文件會載入使用第 3 版 Google Maps API 所需的全部符號和定義。您的網頁必須包含指向該網址的?script?標簽。
此標頭中的?<meta>?標簽會指定如下內容：即應當以全屏模式顯示該地圖，且用戶不能調整地圖尺寸。（有關詳細信息，請參見開發移動設備部分。）
請注意，我們還需要設置?sensor?參數，以指明此應用程序是否使用傳感器確定用戶的位置。在此示例中，我們將該參數設為變量“set_to_true_or_false”，用于強調您必須將該值顯式設為?true?或?false。
地圖 DOM 元素
<div id="map_canvas" style="width: 100%; height: 100%"></div>要在網頁上顯示地圖，我們必須為其留出一個位置。通常，我們的做法是創建一個名為?div?的元素，然后在瀏覽器的文檔對象模型 (DOM) 中獲取此元素的引用。
在上述示例中，我們定義了名為“map_canvas”的?<div>?并使用樣式屬性設置其大小。請注意，該尺寸已設置為“100％”，這將會展開地圖，使之符合移動設備的屏幕尺寸。您可能需要根據瀏覽器的屏幕尺寸和填充區域調整這些值。請注意，地圖總是會根據其中所包含的元素的大小決定其本身的尺寸，因此，您必須始終在?<div>?上顯式設置一個適用的尺寸。
地圖選項
var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = {zoom: 8,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP };要初始化地圖，我們需要先創建一個包含地圖初始化變量的?Map options?對象。該對象不是構建出來的，而是以對象常量的形式創建出來的。由于我們要將地圖的中心設定為某一特定的點，因此，我們還需要創建一個?latlng?值，以保存此位置信息并將其傳遞到地圖的選項中。有關指定位置的詳細信息，請參閱下面的?緯度和經度部分。
我們還設置了初始縮放級別，并將?mapTypeId?設置為?google.maps.MapTypeId.ROADMAP。系統支持以下類型：
- ROADMAP，用于顯示 Google Maps 默認的普通二維圖塊。
- SATELLITE，用于顯示拍攝的圖塊。
- HYBRID，用于同時顯示拍攝的圖塊和突出特征（道路、城市名）圖塊層。
- TERRAIN，用于顯示自然地形圖塊，自然地形圖塊中會顯示高度和水體特征（山脈、河流等）。
與 Google Maps 第 2 版 API 不同的是，第 3 版中沒有設置默認地圖類型。您必須明確設置一個初始地圖類型，才能查看相應的圖塊。
google.maps.Map?- 基本對象
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);Map?類是表示地圖的 JavaScript 類。此類的對象定義了網頁上的單個地圖。（您可以創建此類的多個實例，每個對象都將在網頁上定義一個單獨的地圖。）我們使用 Javascript?new?操作符創建此類的一個新實例。
創建新的地圖實例時，您需要在網頁中指定一個?<div>?HTML 元素作為地圖的容器。HTML 節點是 Javascript?document?對象的子對象，而且我們通過document.getElementById()?方法獲得該元素的引用。
此代碼可定義一個名為?map?的變量，然后將該變量分配給新的?Map?對象，同時將該變量傳遞到在?myOptions?對象常量內定義的選項中。這些選項將會用于初始化地圖的屬性。Map()?函數稱為“構造函數”，其定義如下：
| google.maps.Map(?opts?) | 使用?opts?參數中已傳遞的可選參數創建新地圖。 |
載入地圖
? <body onload="initialize()">呈現 HTML 網頁時，會擴展文檔對象模型 (DOM)，接收任何外部圖像和腳本并將其合并到?document?對象中。為了確保系統在完全載入網頁后才將我們的地圖添加到網頁上，我們只會在 HTML 網頁的?<body>?元素收到?onload?事件后，才會執行用于構建?Map?對象的函數。這樣做可以避免出現不可預期的行為，并使我們可以對地圖繪制的方式和時間進行更多控制。
body?標簽的?onload?屬性是事件處理程序的一個示例。Google Maps Javascript API 還提供了一組事件，可供您進行處理以確定狀態變化。有關詳細信息，請參閱地圖事件部分。
查看示例 (map-simple.html)
緯度和經度
我們還需要一種引用各種地圖位置的方法。在 Google Maps API 中，google.maps.LatLng?對象提供了此類機制。您可以構建一個?LatLng?對象，以 {緯度, 經度} 的順序傳遞其參數：
? var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)請注意：將“地址”轉變為地理地點的過程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。有關詳細信息，請參見服務部分中的地址解析。
LatLng?對象在 Google Maps API 中用途廣泛。例如，google.maps.Marker?對象會在其構造函數中應用?LatLng，并在地圖上所指定的地理位置上添加標記?疊加層。
地圖類型
Google Maps API 中提供了多種地圖類型。除了用戶熟悉的“繪制”道路地圖圖塊，Google Maps API 還可支持其他地圖類型。這些地圖類型是通過使用?mapTypeId?屬性，在地圖的?Map options?對象中設置的。
Google Maps API 提供了以下地圖類型：
- MapTypeId.ROADMAP，用于顯示默認的道路地圖視圖
- MapTypeId.SATELLITE，用于顯示 Google 地球衛星圖像
- MapTypeId.HYBRID，用于同時顯示普通視圖和衛星視圖
- MapTypeId.TERRAIN，用于根據地形信息顯示實際地圖。
您可以通過調用地圖的?setMapTypeId()?方法更改地圖的類型。
轉載于:https://www.cnblogs.com/y0umer/archive/2011/08/12/2809624.html
總結
- 上一篇： 给选择模型的子模型添加COL
- 下一篇： HDU_2544 最短路（Dijkstr