谷歌地图API v3两个标记一个固定拖动 [英] Google maps api v3 Two markers one fixed one dragged

问题描述

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

Javascript：

  var rendererOptions = {
 draggable：true 
}; 
 var Mapa = {
 // HTML节点
 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对象
 
 dirService：new google.maps.DirectionsService（rendererOptions），
 dirRenderer：new google.maps.DirectionsRenderer（rendererOptions），
 map：null，
 $ b showDirections：function（dirResult，dirStatus）{
 if（dirStatus！= google。 maps.DirectionsStatus.OK）{
 alert（'Nãoháresultados！'）; 
 return; 
} 
 
 //显示路线
 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。'）; 
} 
返回值; 
}，
 
 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 
}）; 
 
 //显示方向onload 
 Mapa.getDirections（）; 
} 
} 
 
 
 //加载处理程序以启动应用程序。 
 google.maps.event.addDomListener（window，'load'，Mapa.init）; 
  

我只想要第二个标记，（B）是固定的，不能被拖动。 p>

任何ideias？

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

解决方案

一种选择是自己渲染方向，使其中一个标记可拖动，另一个不可。缺点是你没有能力拖动路线去改变它（除非你自己也实现了这一点;你可以在API中发布本地可拖动方向之前找到它的例子）。

工作示例
（起始位置是绿色）

另一种选择：使用可拖动的方向，但禁止标记。使用如上例所示的标记：

  var directionsDisplay = new google.maps.DirectionsRenderer（{
 draggable：true， 
 suppressMarkers：true 
}）; 
  

可拖动方向的工作示例

I'm using two markers for getting distances A and B

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

I just want the second marker, (B) be fixed, don't be dragable.

Any ideias?

Is based on this: http://webhost.home.pl/piotr/google_maps_test/index.html

解决方案

One option would be to render the directions yourself, making one of the markers draggable, the other not. Disadvantage is you don't get the ability to drag the route to change it (unless you implement that yourself as well; you can probably find examples of that from before the release of native draggable direction in the API).

working example (the start location is green)

Another option: use draggable directions, but suppress the markers. Use markers like the above example:

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

working example with draggable directions

这篇关于谷歌地图API v3两个标记一个固定拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！