Google API V3自定义图标和信息框

最近做了一个PC端列表页和地图找酒店页，两个页面需要用到Google Map API V3地图件。

其中花了比较多的时间的有两个地方，包括自定义图标和自定义信息框，这里将我的经验分享一下。因为是第一次用，所以写的有问题的地方请指出。

一、自定义图标

最终结果的展示：主要功能是在列表页加载完成后获取列表中所有酒店的经纬度等信息，在地图上展示出来。并且对所有的图标marker进行点击事件绑定，还需要将在列表中的某一个酒店滑到屏幕中央时在地图上将该marker改为激活状态，如图中1号。

此处只说如何实现marker的自定义样式。如图，该自定义的marker图标有如下需求：
（1）、marker是动态的图片，展示含有数字1-30的小图片
（2）、在激活状态颜色变成黄颜色。

当时在处理这个问题的时候因为对API不了解，所以最先找到的是这个笨办法。就是利用API中的

MarkerImage对象生成自定义图标。下面是我的一张图片资源，使用MarkerImage对象就可以用这张图片根据需求生成带有不同颜色和标号的图标了。

/*
* 生成自定义标记图片
* @param i 列表中的第几个
* @param col 是否激活
* */
markerImage:function(i,col){
var imageUrl = 'http://img3.tuniucdn.com/img/201603151117/globalHotel/maplist_icon.png';
var markerImage = new google.maps.MarkerImage(
imageUrl,
new google.maps.Size(20, 25),
new google.maps.Point(i*20,col*25)
//'undefined',
//new google.maps.Size(40, 50)
//new google.maps.scaledSize(20, 25)
);
return markerImage;
}

当我们需要标号为1的激活（黄颜色）的图标时，就调用markerImage(0,0),对应的获取了图片中标记出来的区域，和CSS里面的背景图片一样，如图：



这样我们就可以获取这张大图上的各个图标了。

在实际项目中，通过dom加载完成后，获取整个列表的数据，循环该数据对象，将所有maker全部生成存放如一个数组中。

createMarkerList:function(data){
var map = map_box.map;
var markerList = [];
for(var i in data){
var LatLng =  new google.maps.LatLng(data[i].lat,data[i].lng);
var image = {};
var marker = {};
image = map_box.markerImage(i,1);//未选中，第二列
marker = new google.maps.Marker({
position: LatLng, //经纬度位置 lat，lng
map:map,
icon:image,
title:i,
zIndex: parseInt(i)
});
markerList.push(marker);
}
map_box.markerList = markerList;
}

这样后面我们仅需要通过传递过来 i（当前需激活的图标index） 就可以操作该图标了。当需要是某一个图标激活时，我们先生成新的图片，再使用marker.setIcon()将图片替换掉。

/*
* 给marker添加样式
* addOrRemove ture add
* */
addOrRemoveMarkerCss:function(marker,i,addOrRemove){
if(addOrRemove){
image = map_box.markerImage(i,0);//选中，第一列
marker.setIcon(image);
marker.setZIndex(9999);
}else{
image = map_box.markerImage(i,1);//未选中，第二列
/*
* 此处ie8和以下版本不兼容Google API 的（setIcon setZIndex）
* 重置方法，会报错，影响更随浮动的点击事件
* */
if( !(($.browser.msie) && (parseFloat($.browser.version) <= 8.0)) ){
marker.setIcon(image);
marker.setZIndex(parseInt(i));
}
}
}