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();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值