Question

我目前正在开发一个包含谷歌地图的网络应用程序。我正在开发使用Jquery和一个名为GMAP3的库。如果你愿意，你可以看看这里。 http://gmap3.net/ 我创建了一个行驶方向功能和一个半径圆功能。我使用JavaScript菜单来运行这些功能。例如，您可以通过右键单击该位置来放置orgin位置，并使用菜单选择位置orgin位置。那部分工作正常。标记被添加到该位置，并且还是从该位置居中的圆圈。但是，如果我移动行驶方向目标标记，则圆圈仍然保持在其位置。我确实需要一些帮助。感谢。

Javascript代码：

  /**************************************************
   *                      Menu
   **************************************************/

  function Menu($div){
    var that = this, 
        ts = null;

    this.$div = $div;
    this.items = [];

    // create an item using a new closure 
    this.create = function(item){
      var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
      $item
        // bind click on item
        .click(function(){
          if (typeof(item.fnc) === 'function'){
            item.fnc.apply($(this), []);
          }
        })
        // manage mouse over coloration
        .hover(
          function(){$(this).addClass('hover');},
          function(){$(this).removeClass('hover');}
        );
      return $item;
    };
    this.clearTs = function(){
      if (ts){
        clearTimeout(ts);
        ts = null;
      }
    };
    this.initTs = function(t){
      ts = setTimeout(function(){that.close()}, t);
    };
  }

  // add item
  Menu.prototype.add = function(label, cl, fnc){
    this.items.push({
      label:label,
      fnc:fnc,
      cl:cl
    });
  }

  // close previous and open a new menu 
  Menu.prototype.open = function(event){
    this.close();
    var k,
        that = this,
        offset = {
          x:0, 
          y:0
        },
        $menu = $('<div id="menu"></div>');

    // add items in menu
    for(k in this.items){
      $menu.append(this.create(this.items[k]));
    }

    // manage auto-close menu on mouse hover / out
    $menu.hover(
      function(){that.clearTs();},
      function(){that.initTs(3000);}
    );

    // change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
    if ( event.pixel.y + $menu.height() > this.$div.height()){
      offset.y = -$menu.height();
    }
    if ( event.pixel.x + $menu.width() > this.$div.width()){
      offset.x = -$menu.width();
    }

    // use menu as overlay
    this.$div.gmap3({
      action:'addOverlay',
      latLng: event.latLng,
      content: $menu,
      offset: offset
    });

    // start auto-close
    this.initTs(5000);
  }

  // close the menu
  Menu.prototype.close = function(){
    this.clearTs();
    this.$div.gmap3({action:'clear', name:'overlay'});
  }


  /**************************************************
   *                      Main
   **************************************************/

  $(function(){

    var $map = $('#googleMap'), 
        menu = new Menu($map),

        current,  // current click event (used to save as start / end position)
        m1,       // marker "from"
        m2,       // marker "to"
        center = [48.85861640881589, 2.3459243774414062];

    // update marker
    function updateMarker(marker, isM1){
      if (isM1){
        m1 = marker;
      } else {
        m2 = marker;
      }
      updateDirections();
    }

    function Startdistancewidget()
    {          
            $map.gmap3({
            action: 'addCircle',
            circle:{
            options:{
            center: current.latLng,
            radius : 75000,
            fillColor : "Green",
            strokeColor : "White"   
        }
    }
})
    }

    function Finishdistancewidget()
    {          
            $map.gmap3({
            action: 'addCircle',
            circle:{
            options:{
            center: current.latLng,
            radius : 75000,
            fillColor : "Red",
            strokeColor : "White"   
        }
    }
})
    }



    // add marker and manage which one it is (A, B)
    function addMarker(isM1){
      // clear previous marker if set
      var clear = {action:'clear', name:'marker', tag:''};
      if (isM1 && m1) {
        clear.tag = 'from';
        $map.gmap3(clear);
      } else if (!isM1 && m2){
        clear.tag = 'to';
        $map.gmap3(clear);
      }
      // add marker and store it
      $map.gmap3({
        action:'addMarker',
        latLng:current.latLng,
        options:{
          draggable:true,
          icon:new google.maps.MarkerImage('images/icon_big_' + (isM1 ? 'start' : 'stop') + '.png')
        },
        tag: (isM1 ? 'from' : 'to'),
        events: {
          dragend: function(marker){
            updateMarker(marker, isM1);
          }
        },
        callback: function(marker){
          updateMarker(marker, isM1);
        }
      });

    }

    // function called to update direction is m1 and m2 are set
    function updateDirections(){
      if (!(m1 && m2)){
        return;
      }
      $map.gmap3({
        action:'getRoute',
        options:{
          origin:m1.getPosition(),
          destination:m2.getPosition(),
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        callback: function(results){
          if (!results) return;
          $map.gmap3({ action: 'setDirections', directions:results});
        }
      });
    }

    // MENU : ITEM 1
    menu.add('Allign start position here', 'itemA', 
      function(){
        menu.close();
        addMarker(true);
        Startdistancewidget();
      });

    // MENU : ITEM 2
    menu.add('Allign checkpoint position here', 'itemB', 
      function(){
        menu.close();
        addMarker(false);
      })

    // MENU : ITEM 3
    menu.add('Allign finish position here', 'itemC separator', 
      function(){
        menu.close();
        addMarker(false);
        Finishdistancewidget();
      })

    // MENU : ITEM 4
    menu.add('Zoom in', 'zoomIn', 
      function(){
        var map = $map.gmap3('get');
        map.setZoom(map.getZoom() + 1);
        menu.close();
      });

    // MENU : ITEM 5
    menu.add('Zoom out', 'zoomOut',
      function(){
        var map = $map.gmap3('get');
        map.setZoom(map.getZoom() - 1);
        menu.close();
      });

    // MENU : ITEM 6
    menu.add('Center here', 'centerHere', 
      function(){
          $map.gmap3('get').setCenter(current.latLng);
          menu.close();
      });

    // INITIALIZE GOOGLE MAP
    $map.gmap3(
      { action: 'init',
        options:{
          center:center,
          zoom: 5
        },
        events:{
          rightclick:function(map, event){
            current = event;
            menu.open(current);
          },
          click: function(){
            menu.close();
          },
          dragstart: function(){
            menu.close();
          },
          zoom_changed: function(){
            menu.close();
          }
        }
      },
      // add direction renderer to configure options (else, automatically created with default options)
      { action:'addDirectionsRenderer',
        preserveViewport: true,
        markerOptions:{
          visible: false
        }
      },
      // add a direction panel
      { action:'setDirectionsPanel',
        id : 'directions'
      }
    );
  });

Answer 1

我不知道gmap3插件中的语法是什么，但如果要拖动标记要重新定位，则必须将圆圈绑定到标记。在谷歌API中它是

circle.bindTo('center', marker, 'position');

我现在做的几乎一样。

谷歌地图半径圈

1 个答案: