google地圖應用jQuery插件 - gmap

jopen 12年前發布 | 3K 次閱讀 微軟

gmap(google地圖應用插件)

google地圖應用jQuery插件 - gmap

【下載地址】--------》Download

【應用范圍】

google地圖的簡單應用，地點表示，圖片顯示，pup顯示等等；

【使用體驗】

首先，我們根據作者的提示去Google申請一個能在本地應用的Google Map API_KEY ；

這里我獲得一個：ABQIAAAAA1zNj5aQpvD_5p8Q9TNxURTSyb_tENZAChKUjboCtCgZQvfgWRTdBQP5_QCFAYTAHQLy28lzLj_jTA

拿到這個以后，啥也不說了，添加JS庫啊：

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAA1zNj5aQpvD_5p8Q9TNxURTSyb_tENZAChKUjboCtCgZQvfgWRTdBQP5_QCFAYTAHQLy28lzLj_jTA" type="text/javascript"></script>//添加的Google Map的通信協議 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-gmap.1.1.0.js"></script>

向以往的Plugin一樣，gMap的操作方式沒啥區別，定義一個DIV作為地圖的canvas，然后使用jQuery的選擇器進行初始化。

下面就是最簡單的調用gMap的方式：

 <body><div id="map" style="height:300px;width:600px;"></div> //不要忘記給我們的Canvas設置大小和樣式 <script type="text/javascript"> $(function() { $("#map").gMap(); }); </script></body>

這是最簡單的調用方法，下面我們就看看Customizing:

gMap的設置都是JSON數據格式的，而且通過調用gMap()方法設置。看看都有哪些參數供我們使用：

address: string default: 空 地圖中心，地圖以此地點居中顯示；

latitude: float default: 0 緯度

longitude: float default: 0 經度

zoom: integer default: 1 縮放程度，1-19

markers: array default: [] 地圖標記 包含項：address,latitude,longitude,html(顯示的文本內容),popup(是否彈出顯示),icon(顯示圖標,JSON數據)

controls: array default: [] 對google地圖的一系列操作，每項都是調用函數的名稱（不包含"()"）；

scrollwheel：boolean default: true 是否準許鼠標滑輪進行地圖的縮放；

maptype：variable default: G_NORMAL_MAP 地圖顯示類型，可以參考GoogleMapApi ；

html_prepend: string default: <div class=”gmap_ marker”> 顯示標記時的預定義，可以用CSS來控制標記顯示的樣式；

html_append：string default: </div> 顯示標記的結尾標志，應該和html_prepend對應；

icon：JSON 自定義標記圖標格式

image: string
Default: http://www.google.com/mapfiles/marker.png
ICON的URL

shadow: string

Default: http://www.google.com/mapfiles/shadow50.png
ICON陰影的URL
iconsize: array
Default: [20, 34]
ICON的大小
shadowsize: array
Default: [37, 34]
陰影的大小
iconanchor: array
Default: [9, 34]
ICON圖片的相對位置，相當于css中position
infowindowanchor: array
Default: [9, 2]
消息窗口到圖片的相對位置

 

好，gmap的所有option我們都知道了，那么下面就通過一些例子了解下這些option該怎么用：

例子一：我們做一個以上海為中心，放大10倍的圖：

    1: <script type="text/javascript"> 
   2:     $(function() { 
    3:         $("#map").gMap({address:'上海',zoom:10}); 
   4:     }); 
    5: </script>
</div>

例子二：我們也可以把地址換成坐標值：

   1: <script type="text/javascript"> 
    2:     $(function() { 
   3:         $("#map").gMap({latitude:32,longitude:34,zoom:10}); 
    4:     }); 
   5: </script>
</div>

例子三：我們來使用一下marker

    1: <script type="text/javascript"> 
   2:         $(function() { 
    3:             $("#map").gMap({address:'上海',zoom:10,markers:[{address:'上海',html:'Hello,上海',popup:true}]}); 
    4:         }); 
   5: </script>
</div>

例子四：我們看一個比較復雜的marker的應用，可以設置html為：_address/_latlng顯示位置或者坐標

    1: <script type="text/javascript"> 
   2:     $(function() { 
    3:         $("#map").gMap({ markers: [{ latitude: 47.651968, 
   4:             longitude: 9.478485, 
   5:             html: "_latlng" }, 
    6:             { address: "Tettnang, Germany", 
   7:             html: "The place I live" }, 
    8:             { address: "Langenargen, Germany", 
   9:             html: "_address" }], 
   10:             address: "Braitenrain, Germany", 
  11:             zoom: 10 }); 
  12:        }); 
   13:  </script>
</div>

例子五：我們可以通過改變maptype的屬性更改地圖顯示方式：

在GoogleMapApi中我們可以查到maptype的這幾種value:

  • G_NORMAL_MAP displays the default road map view.
  • G_SATELLITE_MAP displays Google Earth satellite images. *
  • G_HYBRID_MAP displays a mixture of normal and satellite views.*
  • G_DEFAULT_MAP_TYPES contains an array of the above three types, useful for iterative processing.
  • G_PHYSICAL_MAP displays a physical map based on terrain information.

我們就使用G_SATELLITE_MAP看一下衛星地圖

    1: <script type="text/javascript"> 
   2:         $(function() { 
    3:             $("#map").gMap({address:'上海',zoom:10,markers:[{address:'上海',html:'Hello,上海',popup:true}],maptype:G_SATELLITE_MAP}); 
    4:         }); 
   5: </script>
</div>

例子六：在看看我們如何將顯示的消息變成了一個鏈接

    1: <script type="text/javascript"> 
   2:     $(function() { 
    3:         $("#map").gMap({address:'上海',zoom:10,markers:[{address:'上海',html:'Hello,上海',popup:true}],maptype:G_SATELLITE_MAP,html_prepend:'<div class="gmap_marker"><a href="www.google.com.hk">',html_append:'</a></div>'}); 
    4:     }); 
   5: </script>
</div>

當然，你也可以通過設置.gmap_marker{}來改變消息框的樣式；

例子七：icon可以在全局中定義，也可以在單個的marker中單獨定義，下面是抄自官方的一個Demo的代碼：

    1: $("#map4").gMap({ controls: false, 
   2:                   scrollwheel: false, 
    3:                   markers: [{ latitude: 47.670553, 
   4:                               longitude: 9.588479, 
   5:                               icon: { image: "images/gmap_pin_orange.png", 
    6:                                       iconsize: [26, 46], 
   7:                                       iconanchor: [12,46], 
   8:                                       infowindowanchor: [12, 0] } }, 
    9:                             { latitude: 47.65197522925437, 
  10:                               longitude: 9.47845458984375 }, 
  11:                             { latitude: 47.594996, 
   12:                               longitude: 9.600708, 
  13:                               icon: { image: "images/gmap_pin_grey.png", 
  14:                                       iconsize: [26, 46], 
   15:                                       iconanchor: [12,46], 
  16:                                       infowindowanchor: [12, 0] } }], 
  17:                   icon: { image: "images/gmap_pin.png",  
   18:                           iconsize: [26, 46], 
  19:                           iconanchor: [12, 46], 
  20:                           infowindowanchor: [12, 0] }, 
   21:                   latitude: 47.58969, 
  22:                   longitude: 9.473413, 
  23:                   zoom: 10 });
</div>

【體驗感受】

very nice!前面也做過一些Google地圖方面的開發，怎么就能找到這個Plugin呢，白白浪費了很多力氣，但是就總體的功能來說，這個Plugin還有些偏弱，只能標記地理位置，功能比較單一，對于一般的項目來說還是不錯的。

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
寫博客

博客分類