原文引自:http://blog.csdn.net/myxx520/archive/2010/02/24/5321352.aspx
關于 GoogleMapAPI 的使用說明
1. GoogleMapAPI 介紹
a) Google 地圖 API 是一種通過 JavaScript 將 Google 地圖嵌入到您的網頁的 API 。該 API 提供了大量實用工具用以處理地圖（正如 http://maps.google.com 網頁上的地圖），并通過各種服務向地圖添加內容，從而使您能夠在您的網站上創建功能全面的地圖應用程序。
2. 相關函數調用以及在實際項目中的應用
a) 首先注冊一個 google 帳號， http://code.google.com/intl/zh-CN/apis/maps/signup.html 隨后在上述地址上面生成對應的 Key ，比如我們得到的 Key 為 ABQIAAAAhrsyA85kX5AhsROY61ghERSePc6gwvi5Rm1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ ，這個 Key 在加載 googlemap 對應的 js 的時候需要用到。
b) 第一個簡單的例子
我們先引入如下 js 腳本
<scriptsrc="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAhrsyA85kX5AhsROY61ghERSe1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ&sensor=true"type="text/javascript">
</script>
然后為我們的主窗體添加如下事件
- < body onload = "initialize()" onunload = "GUnload()" >
- < div id = "map_canvas" style = "width:500px;height:300px" > </ div >
- </ body >
編寫如下函數加載地圖到
id
為
map_canvas
的
DIV
中
- function initialize(){
- var map= new GMap2(document.getElementById( "map_canvas" ));
- map.setCenter( new GLatLng(39.9493,116.3975),13);
- }
同時，我們可以設置一些標注點，比如
Point
為一個
GLatLng
類型的對象，
number
為任意字符串
,map
為當前地圖。
newGMarker(point)
初始化一個標注點，參數為該點的
GLatLng
，
為該標注點 marker 注冊一個 click 事件，當單擊該標注點的時候會彈出一個帶有箭頭的矩形 InfoWindow ，由 map.openInfoWindowHtml(point,myHtml) 函數實現。
在
Googel
地圖中，相關的放大或者縮小按鈕，視圖模式都是由控件標識，添加控件時不指定相應的位置，比如
map.addControl(newGSmallZoomControl());
加入一個放大縮小控件
map.addControl(newGMapTypeControl()); 加入一個地圖類型控件，可以切換為衛星視圖或者地圖視圖
GLatLng 表示一個含有經度和緯度的一個類，表示了某個地址在地理信息系統中的唯一位置，下面介紹如何得到某點具體的 GLatLng
打開 google 地圖，在 google 地圖上查詢到綿陽市公安局涪城區分局的具體地址為：四川省綿陽市四川省綿陽市紅星街 95 號，在該標注點上點擊右鍵：在此放置居中位置單擊地圖上分享連接這個按鈕
注意紅色的地方就是四川省綿陽市四川省綿陽市紅星街
95
號在
GIS
中的具體位置
functioninitialize(){
varmap=newGMap2(document.getElementById("map_canvas"));
map.setCenter(newGLatLng( 31.45454 , 104.755626 ),13);
} 更改里面的 GLatLng 就可以得到四川省綿陽市四川省綿陽市紅星街 95 號附近的地圖
GoogleMap
提供了靈活的
API
接口功能，能讓使用者靈活的應用，比如在地圖上加上標注
和顯示一些與該點有關的信息，比如
這些信息，同時通過
GoogelMap
提供的服務您還可以查閱兩點間的行車路線以及步行路線。可以使用如下函數實現：
- function find(start,end){
- map= new GMap2(document.getElementById( "map_canvas" ));
- map.addControl( new GSmallZoomControl());
- map.setCenter( new GLatLng(28.549809,102.177082),9);
- directionsPanel=document.getElementById( "route" );
- directions= new GDirections(map,directionsPanel);
- directions.load( "from:" +start+ "to:" +end,{
- travelMode:G_TRAVEL_MODE_DRIVING
- });
- }
Start 為起始地點， end 為結束地點 ,div:route 用于顯示行車路線信息， travelMode 的可選項為 G_TRAVEL_MODE_DRIVING 或者 G_TRAVEL_MODE_WALKING
- GEvent.addListener(marker, "click" , function (){
- var myHtml= "<b>#" +number+ "</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- function createMarker(point,number,map){
- var marker= new GMarker(point);
- var message=[ "這" , "是" , "個" , "秘密" , "消息" ];
- marker.value=number;
- GEvent.addListener(marker, "click" , function (){
- var myHtml= "<b>#" +number+ "</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- return marker;
- }
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
