【设计体验之旅——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 });

【体验感觉】

very nice!前面也作过一些Google地图方面的开发，怎么就能找到这个Plugin呢，白白浪费了不少力气，可是就整体的功能来讲，这个Plugin还有些偏弱，只能标记地理位置，功能比较单一，对于通常的项目来讲仍是不错的。

我用菊子曰写博客，你呢？