專業漏水處理,免費現場勘查,精準工法根本止漏
價格公道,人員現場免費估價,立即來電
油漆工程找便宜來簡單殺價網就對了,讓您輕鬆比價,省時省荷包
絕對不吃虧,讓滿天喊價的黑心廠商無所遁形

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] Google Map API 實作

房東:奇克斯
發表時間:2011-11-17
[檢舉]



\"\"


Google Map JavaScript API是Google提供的一組API,可以讓設計師自訂或開發Google Map相關的應用程式

Google Maps Javascript API目前的版本是第三版,所以下面的程式都是以第三版為主

如果你玩過第二版,第三版已不需要事先向Goolge申請Key,而可以直接使用


 

要使用Google Map API,要先在<head>中載入GoogleMapAPI













1 <SCRIPT type=text/javascript src="http://maps.google.com/maps/api/js?sensor=false"></SCRIPT><SCRIPT type=text/javascript src="http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/7/1/main.js"></SCRIPT>




接著在<body>中新增一個DIV,作為用來顯示地圖的元��













1 <DIV style="WIDTH: 600px; HEIGHT: 600px" id=mapDiv></DIV>




接著在<head>中,加入下列JavaScript













01 <SCRIPT type=text/javascript>










02     function initialize() {










03         var myOptions = {










04                 zoom: 14,










05                 center: new google.maps.LatLng(24.80185, 120.97166),










06                 mapTypeId: google.maps.MapTypeId.ROADMAP










07             };










08         var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);










09     }










10 </SCRIPT>




Google Map的初始化方法如下


var map = new google.maps.Map( DOM元素,  Options);

在這範例中,Options帶入了3個必填的參數:



  • zoom:初始時地圖要顯示的比例大小,值的範圍為0~20

  • center:地圖的中心座標,值需為google.maps.LatLng物件

  • mapTypeId:地圖的形態,有4種型態可以選擇,分別為RoadMap(地圖)Satellite(衛星)Hybrid(地圖和衛星混合)Terain(地形圖)


\"\"


在Options中可以設定地圖上是否要顯示一些控制項,這些控制項除scaleControl預設不顯示外,其它預設都會顯示



  • mapTypeControl: true

  • navigationControl : true

  • scaleControl : false

  • streetViewControl: true


\"\"


google.maps.LatLng

google.maps.LatLng為Google Map API專用的座標物件,用十進制來表示經緯度,宣告方式為













1 var point = google.maps.LatLng(十進制經度, 十進制緯度);




初始化後可以利用.lat( )和.lng( )方法來取得經緯度,例如













1 var point = new google.maps.LatLng("24.80185", "120.97166");










2 alert( point.lat() + ", " + point.lng());






完整範例如下:













01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">










02 <html>










03 <head>










04  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">










05  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>










06  <script type="text/javascript">










07     function initialize() {










08         var myOptions = {










09                 zoom: 14,










10                 center: new google.maps.LatLng(24.80185, 120.97166),










11                 mapTypeId: google.maps.MapTypeId.ROADMAP










12             };










13         var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);










14     }










15   </script>










16   <title></title>










17 </head>










18 <body onload="initialize()">










19     <div id="mapDiv" style="width: 400px; height: 400px;"></div>










20 </body>










21 </html>






上面的範例搭配jQuery可以改寫為













01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">










02 <html>










03 <head>










04 <script type="text/javascript" src="jquery.js"></script>










05 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>










06 <script type="text/javascript">










07     $(function(){










08         var myOptions = {










09             zoom: 15,










10             center: new google.maps.LatLng(24.80185, 120.97166),










11             mapTypeId: google.maps.MapTypeId.ROADMAP










12         };










13         var map = new google.maps.Map( $(\'#mapDiv\').get(0) , myOptions);










14     });










15   </script>










16   <title></title>










17 </head>










18 <body>










19     <div id="mapDiv" style="width: 400px; height: 400px;"></div>










20 </body>










21 </html>






最後附上一個範例,可以讓使用者自訂地圖的尺寸和顯示的比例,執行畫面如下:


\"\"


範例完整程式碼如下:













01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">










02 <html>










03 <head>










04   <script type="text/javascript" src="jquery.js"></script>










05   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>










06   <script type="text/javascript">










07       $(function() {










08           var myOptions = {










09               zoom: 15,










10               center: new google.maps.LatLng(24.80185, 120.97166),










11               mapTypeId: google.maps.MapTypeId.ROADMAP,










12               navigationControl: false,










13               scaleControl: false,










14               streetViewControl: false,










15               mapTypeControl: false










16           };










17   










18           var map = new google.maps.Map($(\'#mapDiv\').get(0), myOptions);










19   










20           // 重設地圖尺寸










21           $(\'#changeMapSizeBtn\').click(function() {










22               $(\'#mapDiv\').css(\'width\', $(\'#mapWidth\').val()).css(\'height\', $(\'#mapHeight\').val());










23               map = new google.maps.Map($(\'#mapDiv\').get(0), myOptions);










24           });










25   










26           // 重設地圖顯示比例










27           $(\'#zoomChangeBtn\').click(function() {










28               var zoom = $(\'#mapZoom\').val();










29               zoom = (zoom < 0) ? 0 : zoom;










30               zoom = (zoom > 20) ? 20 : zoom;










31               map.setZoom(parseInt(zoom));










32           });










33   










34       });










35   </script>










36   <title></title>










37 </head>










38 <body>










39     <div>










40         地圖寬度:<input id="mapWidth" size="5" type="text" />










41         地圖高度:<input id="mapHeight" size="5" type="text" />










42         <input id="changeMapSizeBtn" type="button" value="更新地圖大小" />










43         <br />










44         比例<input id="mapZoom" size="5" type="text" value="15" /><input id="zoomChangeBtn" type="button" value="更新比例" />










45     </div>










46     <div id="mapDiv" style="width: 400px; height: 400px;"></div>










47 </body>










48 </html>





 


 


http://www.blog.yehyeh.net/?p=416


 





  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務



  •  共 0 人回應

    姓名:
    佈告內容: