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