google maps v3 添加自定义图标(marker,overlay)
2013-07-11 11:42
399 查看
google搜了很久都没找到符合v3版本的google maps自定义图标,可以让图标使用自己的html,都是V2版本的,依靠重写google api属性来完成.
然后就找了个jquery下的google maps插件: GMAP3(http://gmap3.net)
经过研究发现...这货很方便,而且我也实现了自己的图标!
我的自定义图标使用的是bootstrap插件:font-awesome中的icon.
首先,引入
然后简历一个json
直接调用gmap3的方法:
Body部分:
相当方便!直接产生了地标背景上出现图标,而且还是json方式的,方便我们生成!
然后就找了个jquery下的google maps插件: GMAP3(http://gmap3.net)
经过研究发现...这货很方便,而且我也实现了自己的图标!
我的自定义图标使用的是bootstrap插件:font-awesome中的icon.
首先,引入
<link href="bootstrap.css" rel="stylesheet"/> <link href="bootstrap-responsive.css" rel="stylesheet"/> <link href="font-awesome.css" rel="stylesheet"/> <script type="text/javascript" src="jquery.js"></script> <script src="https://maps.googleapis.com/maps/api/js?&sensor=false" type="text/javascript"></script> <script type="text/javascript" src="gmap3.js"></script>
然后简历一个json
var $values = [ { latLng: [48.8620722, 2.352047], data: "Paris !", options: { icon: "marker_icon_bg.png", content: '<i style="color:#fff" class="icon-food"></i>', offset: { y: -32, x: -6 } } }, { address: "86000 Poitiers, France", data: "Poitiers : great city !", options: { icon: "marker_icon_bg.png", content: '<i style="color:#fff" class="icon-picture"></i>', offset: { y: -32, x: -8 } } }, { address: "66000 Perpignan, France", data: "Perpignan ! <br> GO USAP !", options: { icon: "marker_icon_bg.png", content: '<i style="color:#fff" class="icon-building"></i>', offset: { y: -32, x: -6 } } } ];
直接调用gmap3的方法:
$(function () { $('#map_canvas').gmap3({ map: { options: { center: [46.578498, 2.457275], zoom: 5 } }, marker: { values: $values, options: { draggable: false }, events: { mouseover: function (marker, event, context) { var map = $(this).gmap3("get"), infowindow = $(this).gmap3({ get: { name: "infowindow" } }); if (infowindow) { infowindow.open(map, marker); infowindow.setContent(context.data); } else { $(this).gmap3({ infowindow: { anchor: marker, options: { content: context.data } } }); } }, mouseout: function () { var infowindow = $(this).gmap3({ get: { name: "infowindow" } }); if (infowindow) { infowindow.close(); } } } }, overlay: { values: $values } }); });
Body部分:
<body> <div id="map_canvas" style="width:100%; height:100%"></div> </body>
相当方便!直接产生了地标背景上出现图标,而且还是json方式的,方便我们生成!
相关文章推荐
- Google Maps API:自定义Marker图标,为图标添加文字等信息
- iPad和iPhone的Safari“添加至主屏幕”功能如何自定义图标
- google map使用自定义Marker在地图上添加文字标示
- Extjs 添加自定义图标
- 微信公众号自定义菜单如何添加emoji表情图标?
- 高德地图-添加自定义图标
- VS2010添加自定义控件以及使用第三方控件的方法 自定义图标设置方法
- 自定义网站在Safari中添加至主屏幕的图标
- 如何在浏览器地址栏前添加自定义的小图标?
- SenchTouch添加自定义字体图标方法
- easyUI添加自定义图标
- google map使用自定义Marker在地图上添加文字标示
- 前端项目添加自定义icon图标步骤
- 如何在浏览器地址栏前添加自定义的小图标?
- easyui添加自定义图标
- Ubuntu12.04添加自定义图标
- Nancy之给我们的网站添加自定义图标
- J2ME添加自定义图标
- 在浏览器地址栏前添加自定义的ico图标
- 在下拉列表Spinner中添加自定义文字和图标的方法。