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="width:100%; height:100%"></div>
</body>
相当方便!直接产生了地标背景上出现图标,而且还是json方式的,方便我们生成!