google搜了很久都没找到符合v3版本的google maps自定义图标,可以让图标使用自己的html,都是V2版本的,依靠重写google api属性来完成.
然后就找了个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="100%; height:100%"></div> </body>
相当方便!直接产生了地标背景上出现图标,而且还是json方式的,方便我们生成!