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.getElementByIdx("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();
}
分享到:
相关推荐
Google Maps API是Google提供的一项强大的服务,允许开发者在自己的应用程序中集成地图功能,进行地理位置相关的开发。这个"Google Maps API编程资源大全"包含了丰富的资料,帮助开发者深入理解和使用这一技术。 ...
标题中的“flex做的googlemaps”指的是使用Adobe Flex技术来开发Google Maps的应用程序。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIA),它可以与Flash Player或Adobe AIR运行...
《谷歌地图Google Maps 4.5.3 for Blackberry:移动导航的革命》 谷歌地图Google Maps是一款全球知名的在线地图服务,它为用户提供了一个全面、准确且实时更新的地图平台。在移动设备上,尤其是Blackberry操作系统...
在IT行业中,Google Maps是一个非常重要的工具,尤其在地理信息系统(GIS)和定位服务领域。本文将深入探讨Google Maps的功能、使用方法以及如何在地图上进行标注。 首先,Google Maps是一款由Google公司提供的在线...
2. **事件**:Google Maps API提供了丰富的事件监听器,如点击地图、拖动地图、缩放地图等,开发者可以据此响应用户的交互行为,实现动态的地图应用。 3. **控件**:API支持添加自定义或预定义的控件,如缩放控件、...
这需要利用Google Maps JavaScript API的Marker和InfoWindow对象,以及事件监听器来响应用户的交互。 查询地标功能则涉及到搜索和过滤技术。用户可以通过输入关键字来查找特定的地标或商家。这个功能可能需要用到...
这需要使用Google Maps API中的`google.maps.Map`对象的`event.addListener`方法,监听`contextmenu`事件(右键点击)。在事件处理函数中,我们获取点击的坐标,创建一个新的`google.maps.Marker`对象,并将其设置到...
Google Maps API主要包括JavaScript API、Android API、iOS SDK和Web Services等几个部分,其中JavaScript API是最常用的一种,适用于网页端的开发。要使用Google Maps API,首先需要在Google Cloud Console中创建...
Google Maps Downloader 6.63 破解版 这个版本是目前最新的,压缩包里面有gmd.exe和gmd2.exe两个文件,gmd.exe是官方版本的,gmd2.exe是破解后的版本。 需要注意的是,gmd2.exe在运行后标题栏上依然会有(Trial)字样...
在IT行业中,Google API是开发者们广泛使用的工具之一,尤其在地理位置服务方面,Google Maps API更是扮演了核心角色。本文将深入探讨Google Maps API的开发详解,帮助你掌握如何利用这个强大的工具创建丰富的地图...
在 Google Maps API V3 中,Map 是地图的核心组件,提供了多种配置选项和事件监听器。开发者可以使用 MapOptions 对象来配置地图的基本属性,如中心点、缩放级别、地图类型等。同时,MapTypeId 对象提供了多种地图...
├─06 Google Maps API高级编程 │ ├─6.1 GPolyline折线对象和GPolygon多边形对象 │ │ ├─6.1.1 使用GPolyline折线对象 │ │ ├─6.1.2 使用GPolygon多边形对象 │ │ ├─6.1.4 使用GPolyline和GPolygon的...
《Google Maps API 开发大全》是一本全面深入探讨Google Maps API技术的专著,旨在帮助开发者充分利用这个强大的工具集来创建交互式地图应用。书中详细介绍了如何集成Google Maps API到各种项目中,从基础概念到高级...
谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310
Google Maps API提供了丰富的事件系统,可以监听用户的交互行为。例如,监听地图的拖动事件: ```javascript google.maps.event.addListener(map, 'dragend', function() { console.log('地图被拖动了'); }); ...
**黑莓8220与Google Maps 4.5的兼容性详解** 在智能手机领域,黑莓8220是一款经典的设备,以其全键盘和QWERTY输入体验深受用户喜爱。而Google Maps作为全球领先的在线地图服务,为用户提供路线导航、地点搜索、交通...
在Android平台上,Google Maps是一个强大的工具,它允许开发者集成地图功能到自己的应用程序中,为用户提供地理定位、导航、路线规划等服务。本实例开发将详细讲解如何在Android应用中使用Google Maps API,让用户...
《Google Maps API开发大全code》是一份详尽的资源,旨在帮助开发者深入理解和熟练运用Google Maps API进行地图应用的开发。Google Maps API是Google提供的一项服务,允许开发者将地图功能集成到自己的网站或应用...
7. **事件监听和交互**:Google Maps API允许开发者监听用户的交互,如点击、拖动等,从而实现自定义的交互效果和功能,如点击标记弹出信息框。 8. **性能优化**:由于离线环境下网络资源有限,开发者需要关注性能...
Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.