【问题标题】:Google maps api v3 Two markers one fixed one dragged谷歌地图api v3 两个标记一固定一拖
【发布时间】:2013-06-06 15:57:28
【问题描述】:

我使用两个标记来获取距离 A 和 B

Javascript:

var rendererOptions = {
    draggable: true
  };
    var Mapa = {
  // HTML Nodes
  mapContainer: document.getElementById('mapa'),
  dirContainer: document.getElementById('trasa'),
  fromInput: document.getElementById('from-input'),
  toInput: document.getElementById('to-input'),
  travelModeInput: document.getElementById('travel-mode-input'),
  unitInput: document.getElementById('unit-input'),

  // API Objects

  dirService: new google.maps.DirectionsService(rendererOptions),
  dirRenderer: new google.maps.DirectionsRenderer(rendererOptions),
  map: null,

  showDirections: function(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('Não há resultados!');
      return;
    }

    // Show directions
    Mapa.dirRenderer.setMap(Mapa.map);
    Mapa.dirRenderer.setPanel(Mapa.dirContainer);
    Mapa.dirRenderer.setDirections(dirResult);
  },

  getSelectedTravelMode: function() {
    var value = Mapa.travelModeInput.options[Mapa.travelModeInput.selectedIndex].value
    if (value == 'driving') {
      value = google.maps.DirectionsTravelMode.DRIVING;
    } else {
      alert('Unsupported travel mode.');
    }
    return value;
  },

  getDirections: function() {
    var fromStr = Mapa.fromInput.value;
    var toStr = Mapa.toInput.value;
    var dirRequest = {
      origin: fromStr,
      destination: toStr,
      travelMode: Mapa.getSelectedTravelMode(),
      provideRouteAlternatives: true,

    };
    Mapa.dirService.route(dirRequest, Mapa.showDirections);
  },

  init: function() {
    var latLng = new google.maps.LatLng(38.6978, -27.1624);
    Mapa.map = new google.maps.Map(Mapa.mapContainer, {
      zoom: 15,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Show directions onload
    Mapa.getDirections();
  }
}


// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', Mapa.init);

我只想要第二个标记,(B) 是固定的,不要拖动。

有什么想法吗?

基于此:http://webhost.home.pl/piotr/google_maps_test/index.html

【问题讨论】:

标签: javascript google-maps google-maps-api-3 drag-and-drop draggable


【解决方案1】:

一种选择是自己渲染方向,使一个标记可拖动,另一个不能。缺点是您无法通过拖动路线来更改它(除非您自己也实现了该功能;您可能会在 API 中发布原生可拖动方向之前找到相关示例)。

working example (起始位置为绿色)

另一种选择:使用可拖动的方向,但不显示标记。使用类似上面例子的标记:

var directionsDisplay = new google.maps.DirectionsRenderer({
      draggable:true, 
      suppressMarkers: true
    });

working example with draggable directions

【讨论】:

  • humm suppressMarkers:true 只是隐藏图标我猜你的例子太高级了,我试图修改我在代码上所做的事情,但我无法理解 =S
【解决方案2】:

我看不到您在哪里创建标记,但它们有一个可拖动的属性...

marker = new google.maps.Marker({
 map:map,
 draggable:true //Change to false for B
 });

【讨论】:

  • 我认为标记是自动创建的,这就是为什么我找不到控制它的方法 =/ 就像将 false draggable 设置为 B
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-08-07
  • 2011-03-25
  • 1970-01-01
  • 2016-08-30
  • 2014-03-05
  • 2012-04-29
  • 2012-05-09
相关资源
最近更新 更多