两个标记，一个固定，一个拖动

Google maps api v3 Two markers one fixed one dragged

本文关键字：一个 拖动 两个      更新时间：2023-09-26

我使用两个标记来获得距离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

一种选择是自己渲染方向，使其中一个标记可拖动，另一个不可拖动。缺点是你无法拖动路径来改变它(除非你自己也实现了;你可以在API中原生可拖动方向发布之前找到这样的例子)。

工作的例子(起始位置为绿色)

另一个选项:使用可拖动方向，但抑制标记。像上面的例子一样使用标记:

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

带有可拖动方向的工作示例

我不知道你在哪里创建你的标记，但他们有一个可拖动的属性…

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