Google Maps API 进级: GoogleMaps常用事件及应用思路2

转自:http://hi.baidu.com/xfm_zhr/blog/item/7bb88c19139de94242a9ad2b.html

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();

}

posted on 2009-12-18 10:50  王培  阅读(580)  评论(0编辑  收藏  举报

导航