изменить значок маркера по умолчанию на маршруте - PullRequest
Новая
       2

изменить значок маркера по умолчанию на маршруте

1 голос
/ 02 апреля 2012

Я хочу изменить значок маркера по умолчанию при поиске маршрута между двумя точками.Как мне это сделать?Я использую этот код, но я не получил только карту без маршрута и точек 

var start  = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
 icon:'http://www.google.com/mapfiles/dd-start.png',
 map: map  });

var end = new google.maps.Marker({
position: new google.maps.LatLng(lat1, long1),
icon:'http://www.google.com/mapfiles/dd-end.png',
map: map  });
var request = {
            origin: start,
                destination: end,
                optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

Ответы [ 4 ]

3 голосов
/ 02 апреля 2012

Когда вы создаете средство визуализации, добавьте эту опцию, а затем поместите маркеры в начало (начало) и пункт назначения (конец) 

    directionsDisplay = new google.maps.DirectionsRenderer({
      suppressMarkers: true
    });
2 голосов
/ 02 апреля 2012

вот рабочий пример, измените по вашему требованию. 

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.7749295, -122.4194155);
    var myOptions = {
      zoom:13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));

    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      } else {
        if (waypoints.length < 9) {
          waypoints.push({ location: destination, stopover: true });
          destination = event.latLng;
          addMarker(destination);
        } else {
          alert("Maximum number of waypoints reached");
        }
      }
    });
  }

  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }

  function calcRoute() {

    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }

    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }

    var mode = google.maps.DirectionsTravelMode.DRIVING;

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,

    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
      }
    });

    clearMarkers();
    directionsVisible = true;
  }

  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }

  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null;
    waypoints = [];
    directionsVisible = false;
  }

  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">

    <tr>
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>

  </div>
</body>
</html>
0 голосов
/ 25 июня 2019

Вы можете изменить значок всех маркеров с помощью следующей строки кода: 

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        icon:"put_here_the_url_to_your_icon",
    },
});

Если вы хотите использовать разные иконки для каждого маркера на карте, вы можете создать каждый маркер со своими позициями ииконки с использованием конструктора маркеров: 

new google.maps.Marker({
    position: {lat: 37.753212, lng: 14.991608}, //Example
    map: map,
    icon: your_marker_image
});

(вы можете использовать вновь созданные маркеры в качестве маркеров начальной, конечной или путевой точки).Затем передайте конструктору DirectionRenderer текущий объект (markerOption): 

directionsDisplay = new google.maps.DirectionsRenderer({
    markerOptions:{
        visible:false,
    },
});

Таким образом, маркеры службы направления не отображаются.

https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions

0 голосов
/ 12 апреля 2012

Хорошо, моя попытка:

  1. Набор visible = false и draggable = true в DirectionsRendererOptions объект
  2. Создать DirectionsRenderer объект
  3. Создание маркеров самостоятельно (с опцией draggable=true)

  4. Передача события dragstart и drag от вашего маркера к маркерам визуализации (начало и конец) 

    google.maps.event.addListener(marker_start, 'dragstart', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'dragstart', e);
});

google.maps.event.addListener(marker_start, 'drag', function(e) {
    directionsRenderer.b.markers[0].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'drag', e);
});

google.maps.event.addListener(marker_end, 'dragstart', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'dragstart', e);
});

google.maps.event.addListener(marker_end, 'drag', function(e) {
    var l = directionsRenderer.b.markers.length - 1;
    directionsRenderer.b.markers[l].setPosition(this.getPosition());
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'drag', e);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...