【設計體驗之旅——jQuery就是牛！】第一部 35個高級jQuery插件使用體驗持續更新（三）

時間 2019-12-20

標籤設計體驗之旅 jquery 就是一部高級插件使用持續更新欄目 JQuery 简体版

原文原文鏈接

gmap(google地圖應用插件)javascript

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

【應用範圍】css

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

【使用體驗】java

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

這裏我得到一個：ABQIAAAAA1zNj5aQpvD_5p8Q9TNxURTSyb_tENZAChKUjboCtCgZQvfgWRTdBQP5_QCFAYTAHQLy28lzLj_jTAgit

拿到這個之後，啥也不說了，添加JS庫啊：web

<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的選擇器進行初始化。canvas

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

<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倍的圖：

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

例子二：咱們也能夠把地址換成座標值：

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

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

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

例子四：咱們看一個比較複雜的marker的應用，能夠設置html爲：_address/_latlng顯示位置或者座標

 
<script type="text/javascript"> 
   
    $(function() { 
   
        $("#map").gMap({ markers: [{ latitude: 47.651968, 
   
            longitude: 9.478485, 
   
            html: "_latlng" }, 
   
            { address: "Tettnang, Germany", 
   
            html: "The place I live" }, 
   
            { address: "Langenargen, Germany", 
   
            html: "_address" }], 
   
            address: "Braitenrain, Germany", 
   
            zoom: 10 }); 
   
       }); 
   
 </script>

例子五：咱們能夠經過改變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看一下衛星地圖

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

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

 
<script type="text/javascript"> 
   
    $(function() { 
   
        $("#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>'}); 
   
    }); 
   
</script>

固然，你也能夠經過設置.gmap_marker{}來改變消息框的樣式；

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

 
$("#map4").gMap({ controls: false, 
   
                  scrollwheel: false, 
   
                  markers: [{ latitude: 47.670553, 
   
                              longitude: 9.588479, 
   
                              icon: { image: "images/gmap_pin_orange.png", 
   
                                      iconsize: [26, 46], 
   
                                      iconanchor: [12,46], 
   
                                      infowindowanchor: [12, 0] } }, 
   
                            { latitude: 47.65197522925437, 
   
                              longitude: 9.47845458984375 }, 
   
                            { latitude: 47.594996, 
   
                              longitude: 9.600708, 
   
                              icon: { image: "images/gmap_pin_grey.png", 
   
                                      iconsize: [26, 46], 
   
                                      iconanchor: [12,46], 
   
                                      infowindowanchor: [12, 0] } }], 
   
                  icon: { image: "images/gmap_pin.png", 
   
                          iconsize: [26, 46], 
   
                          iconanchor: [12, 46], 
   
                          infowindowanchor: [12, 0] }, 
   
                  latitude: 47.58969, 
   
                  longitude: 9.473413, 
   
                  zoom: 10 });