Google Maps API 进级： GoogleMaps常用事件及应用思路2
GMarker的单击，双击以及拖动效果
注意：默认创建的GMarker是无法拖动的，必须在GMarker创建时在GmarkOptions里激活该功能，即将GmarkerOptions的draggable设为true,通常同时设定bouncy和bounceGravity属性改变拖放的效果。
关于双击事件。默认双击行为是双击的位置设为地图中心。可用GMap2.doubleClickZoomEnabled()等方法屏蔽默认的操作。
示例代码：
GMarker.prototype.setIndex = function(index)
{
this.index = index;
}
var markers = [];
//通过复制产生
var myIcon= new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker.png");
//创建地标
function createMarker(point)
{
var marker = new GMarker(point, {icon: myIcon, draggable: true, bouncy: true});
var index = markers.length;
//双击地标删除该地标
GEvent.addListener(marker, 'dblclick', function()
{
deleteMarker(marker);
});
//dragstart事件，换新图标
GEvent.addListener(marker, 'dragstart', function()
{
marker.setImage("http://www.google.com/mapfiles/dd-start.png");
});
//dragend事件，换回原图标
GEvent.addListener(marker, 'dragend', function()
{
marker.setImage("http://www.google.com/mapfiles/marker.png");
});
//单击显示形成安排
GEvent.addListener(marker, 'click', function()
{
marker.openInfoWindowHtml("干些什么呢？");
});
//drag事件
//注意，如果添加了polyline，则拖动地标时需要重画路线
GEvent.addListener(marker, 'drag', function()
{
redrawPolyline();
});
marker.setIndex(index);
markers[index] = marker;
map.addOverlay(marker);
//每创建一个新的地标就重画一次
redrawPolyline();
}
//双击地标删除该地标
function deleteMarker(marker)
{
//确定是否真的删除
if(!confirm("确定删除该地标吗？")) return;
var index = marker.index;
//移除该图层
map.removeOverlay(marker);
//从数组中删除指定GMarker并更新index
for(var i = index; i<markers.length-1; i++)
{
markers[i+1].setIndex(i);
markers[i] = markers[i+1];
}
markers.length = markers.length-1;
}
function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var centerPoint= new GLatLng(39.92, 116.46);
map.setCenter(centerPoint, 4);
GEvent.addListener(map, 'click', function(overlay, point)
{
if(point) createMarker(point);
});
}
}
//添加行程路线
function addPolyline()
{
//创建
var points = [];
for(var i=0; i<markers.length; i++)
{
points[i] = markers[i].getPoint();
}
polyline = new GPolyline(
points, //GLatLng()数组
"#FF0000", //折线颜色
10, //折线宽度
0.5 //透明度
);
map.addOverlay(polyline);
}
//删除行程路线
function removePolyline()
{
polyline.remove();
polyline = null;
}
//重画行程路线
function redrawPolyline()
{
if(polyline)
{
removePolyline();
}
addPolyline();
}