`
virusfu
  • 浏览: 183080 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GoogleMaps常用事件(转载)

 
阅读更多
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 Maps API是Google提供的一项强大的服务,允许开发者在自己的应用程序中集成地图功能,进行地理位置相关的开发。这个"Google Maps API编程资源大全"包含了丰富的资料,帮助开发者深入理解和使用这一技术。 ...

    flex做的googlemaps

    标题中的“flex做的googlemaps”指的是使用Adobe Flex技术来开发Google Maps的应用程序。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIA),它可以与Flash Player或Adobe AIR运行...

    GoogleMaps-4.5.3-Blackberry

    《谷歌地图Google Maps 4.5.3 for Blackberry:移动导航的革命》 谷歌地图Google Maps是一款全球知名的在线地图服务,它为用户提供了一个全面、准确且实时更新的地图平台。在移动设备上,尤其是Blackberry操作系统...

    google maps,标注

    在IT行业中,Google Maps是一个非常重要的工具,尤其在地理信息系统(GIS)和定位服务领域。本文将深入探讨Google Maps的功能、使用方法以及如何在地图上进行标注。 首先,Google Maps是一款由Google公司提供的在线...

    图书Google Maps API开发大全的各章源码

    2. **事件**:Google Maps API提供了丰富的事件监听器,如点击地图、拖动地图、缩放地图等,开发者可以据此响应用户的交互行为,实现动态的地图应用。 3. **控件**:API支持添加自定义或预定义的控件,如缩放控件、...

    Google Maps 二次开发实例

    这需要利用Google Maps JavaScript API的Marker和InfoWindow对象,以及事件监听器来响应用户的交互。 查询地标功能则涉及到搜索和过滤技术。用户可以通过输入关键字来查找特定的地标或商家。这个功能可能需要用到...

    google maps 自定义图形控件

    这需要使用Google Maps API中的`google.maps.Map`对象的`event.addListener`方法,监听`contextmenu`事件(右键点击)。在事件处理函数中,我们获取点击的坐标,创建一个新的`google.maps.Marker`对象,并将其设置到...

    Google Maps API开发大全

    Google Maps API主要包括JavaScript API、Android API、iOS SDK和Web Services等几个部分,其中JavaScript API是最常用的一种,适用于网页端的开发。要使用Google Maps API,首先需要在Google Cloud Console中创建...

    Google Maps Downloader 6.63 破解版

    Google Maps Downloader 6.63 破解版 这个版本是目前最新的,压缩包里面有gmd.exe和gmd2.exe两个文件,gmd.exe是官方版本的,gmd2.exe是破解后的版本。 需要注意的是,gmd2.exe在运行后标题栏上依然会有(Trial)字样...

    Google API开发详解:Google Maps部分

    在IT行业中,Google API是开发者们广泛使用的工具之一,尤其在地理位置服务方面,Google Maps API更是扮演了核心角色。本文将深入探讨Google Maps API的开发详解,帮助你掌握如何利用这个强大的工具创建丰富的地图...

    Google Maps API V3 中文参考文档(JavaScript)

    在 Google Maps API V3 中,Map 是地图的核心组件,提供了多种配置选项和事件监听器。开发者可以使用 MapOptions 对象来配置地图的基本属性,如中心点、缩放级别、地图类型等。同时,MapTypeId 对象提供了多种地图...

    Google Maps API高级编程

    ├─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技术的专著,旨在帮助开发者充分利用这个强大的工具集来创建交互式地图应用。书中详细介绍了如何集成Google Maps API到各种项目中,从基础概念到高级...

    谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310

    谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310

    Google Api之Google maps代码

    Google Maps API提供了丰富的事件系统,可以监听用户的交互行为。例如,监听地图的拖动事件: ```javascript google.maps.event.addListener(map, 'dragend', function() { console.log('地图被拖动了'); }); ...

    黑莓8220 可用googlemaps4.5

    **黑莓8220与Google Maps 4.5的兼容性详解** 在智能手机领域,黑莓8220是一款经典的设备,以其全键盘和QWERTY输入体验深受用户喜爱。而Google Maps作为全球领先的在线地图服务,为用户提供路线导航、地点搜索、交通...

    android 的Google Maps

    在Android平台上,Google Maps是一个强大的工具,它允许开发者集成地图功能到自己的应用程序中,为用户提供地理定位、导航、路线规划等服务。本实例开发将详细讲解如何在Android应用中使用Google Maps API,让用户...

    Google Maps API开发大全code

    《Google Maps API开发大全code》是一份详尽的资源,旨在帮助开发者深入理解和熟练运用Google Maps API进行地图应用的开发。Google Maps API是Google提供的一项服务,允许开发者将地图功能集成到自己的网站或应用...

    Google Maps API v3 (3.16.2) 离线开发包

    7. **事件监听和交互**:Google Maps API允许开发者监听用户的交互,如点击、拖动等,从而实现自定义的交互效果和功能,如点击标记弹出信息框。 8. **性能优化**:由于离线环境下网络资源有限,开发者需要关注性能...

    Google Maps API Android and Javascript Demo

    Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.

Global site tag (gtag.js) - Google Analytics