【设计体验之旅——jQuery就是牛！】第一部 35个高级jQuery插件使用体验持续更新（三）...

最新推荐文章于 2024-09-04 20:55:34 发布

weixin_34345753

最新推荐文章于 2024-09-04 20:55:34 发布

阅读量76

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/enjoyreanjian/blog/39954

版权

2019独角兽企业重金招聘Python工程师标准>>>

gmap(google地图应用插件)

tumblr

【下载地址】--------》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倍的图：

 
<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 }); 
  