javascript 更改谷歌地图方向中的单个标记

Change individual markers in google maps directions

提问by Vinod

I have an issue with adding individual markers in Google maps API. I searched a lot like the following link, Change individual markers in google maps directions api V3. But I am unable to implement the same on my code. With the help of suppressMarkers: trueI am able to prevent the default markers. Now only root directions are showing. Now how can I add the makers for start point and end point. Following is my code.

我在 Google 地图 API 中添加单个标记时遇到问题。我搜索了很多类似下面的链接，在谷歌地图方向 api V3 中更改单个标记。但是我无法在我的代码上实现相同的功能。在suppressMarkers: true我的帮助下，我能够阻止默认标记。现在只显示根方向。现在如何为起点和终点添加制造商。以下是我的代码。

   function GoogleMap_selected(){

        var lattitude_value= document.getElementById('slectedLat').value;
        var longitude_value= document.getElementById('slectedLon').value;

        var from = new google.maps.LatLng(mylatitude, mylongitude);
        var to = new google.maps.LatLng(lattitude_value, longitude_value);

         var directionsService = new google.maps.DirectionsService();
         var directionsRequest = {
           origin: from,
           destination: to,
           travelMode: google.maps.DirectionsTravelMode.DRIVING,
           unitSystem: google.maps.UnitSystem.METRIC
         };

        this.initialize = function(){
        var map = showMap_selected();

         directionsService.route(
                  directionsRequest,
                  function(response, status)
                  {

                    if (status == google.maps.DirectionsStatus.OK)
                    {
                      new google.maps.DirectionsRenderer({
                        map: map,
                        directions: response,
                        suppressMarkers: true

                      });
                    }
                    else
                        {
                         alert("Unable to retrive route");
                        }
                var leg = response.routes[ 0 ].legs[ 0 ];
                makeMarker( leg.start_location, icons.start, "title" );
                makeMarker( leg.end_location, icons.end, 'title' );
                  }
                );

        }

function makeMarker( position, icon, title ) {
 new google.maps.Marker({
  position: position,
  map: map,
  icon: icon,
  title: title
 });
}

 var icons = {
  start: new google.maps.MarkerImage(
   // URL
   'start.png',
   // (width,height)
   new google.maps.Size( 44, 32 ),
   // The origin point (x,y)
   new google.maps.Point( 0, 0 ),
   // The anchor point (x,y)
   new google.maps.Point( 22, 32 )
  ),
  end: new google.maps.MarkerImage(
   // URL
   'end.png',
   // (width,height)
   new google.maps.Size( 44, 32 ),
   // The origin point (x,y)
   new google.maps.Point( 0, 0 ),
   // The anchor point (x,y)
   new google.maps.Point( 22, 32 )
  )
 };


         var showMap_selected = function(){
            var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(lattitude_value, longitude_value),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
            return map;
        }
        }

Can anyone suggest me that how to implement adding of markers at both start and end points with respect to my code.

任何人都可以建议我如何在我的代码的起点和终点实现添加标记。

回答by geocodezip

Changes:

变化：

1. pass the map variable into the makeMarker function (as DrMolle observed)
2. change icon URLs to ones that work on my server
3. move the code that adds the markers so it only runs if the route request succeeds

1. 将地图变量传递给 makeMarker 函数（如 DrMolle 所观察到的）
2. 将图标 URL 更改为在我的服务器上工作的 URL
3. 移动添加标记的代码，使其仅在路由请求成功时运行

working fiddle

工作小提琴

function GoogleMap_selected() {

    var lattitude_value = document.getElementById('slectedLat').value;
    var longitude_value = document.getElementById('slectedLon').value;

    var from = new google.maps.LatLng(mylatitude, mylongitude);
    var to = new google.maps.LatLng(lattitude_value, longitude_value);

    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
        origin: from,
        destination: to,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
    };

    this.initialize = function () {
        var map = showMap_selected();

        directionsService.route(
        directionsRequest,

        function (response, status) {

            if (status == google.maps.DirectionsStatus.OK) {
                new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    suppressMarkers: true
                });
                var leg = response.routes[0].legs[0];
                makeMarker(leg.start_location, icons.start, "title", map);
                makeMarker(leg.end_location, icons.end, 'title', map);

            } else {
                alert("Unable to retrive route");
            }

        });

    }

    function makeMarker(position, icon, title, map) {
        new google.maps.Marker({
            position: position,
            map: map,
            icon: icon,
            title: title
        });
    }

    var icons = {
        start: new google.maps.MarkerImage(
        // URL
        'http://maps.google.com/mapfiles/ms/micons/blue.png',
        // (width,height)
        new google.maps.Size(44, 32),
        // The origin point (x,y)
        new google.maps.Point(0, 0),
        // The anchor point (x,y)
        new google.maps.Point(22, 32)),
        end: new google.maps.MarkerImage(
        // URL
        'http://maps.google.com/mapfiles/ms/micons/green.png',
        // (width,height)
        new google.maps.Size(44, 32),
        // The origin point (x,y)
        new google.maps.Point(0, 0),
        // The anchor point (x,y)
        new google.maps.Point(22, 32))
    };


    var showMap_selected = function () {
        var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(lattitude_value, longitude_value),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
        return map;
    };
}

code snippet:

代码片段：

// 32.715738, -117.1610838
// 40.7127837, -74.0059413
var mylatitude = 40.7127837;
var mylongitude = -74.0059413;

function GoogleMap_selected() {

  var lattitude_value = document.getElementById('slectedLat').value;
  var longitude_value = document.getElementById('slectedLon').value;

  var from = new google.maps.LatLng(mylatitude, mylongitude);
  var to = new google.maps.LatLng(lattitude_value, longitude_value);

  var directionsService = new google.maps.DirectionsService();
  var directionsRequest = {
    origin: from,
    destination: to,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC
  };

  this.initialize = function() {
    var map = showMap_selected();

    directionsService.route(
      directionsRequest,

      function(response, status) {

        if (status == google.maps.DirectionsStatus.OK) {
          new google.maps.DirectionsRenderer({
            map: map,
            directions: response,
            suppressMarkers: true
          });
          var leg = response.routes[0].legs[0];
          makeMarker(leg.start_location, icons.start, "title", map);
          makeMarker(leg.end_location, icons.end, 'title', map);

        } else {
          alert("Unable to retrive route");
        }

      });

  }

  function makeMarker(position, icon, title, map) {
    new google.maps.Marker({
      position: position,
      map: map,
      icon: icon,
      title: title
    });
  }

  var icons = {
    start: new google.maps.MarkerImage(
      // URL
      'http://maps.google.com/mapfiles/ms/micons/blue.png',
      // (width,height)
      new google.maps.Size(44, 32),
      // The origin point (x,y)
      new google.maps.Point(0, 0),
      // The anchor point (x,y)
      new google.maps.Point(22, 32)),
    end: new google.maps.MarkerImage(
      // URL
      'http://maps.google.com/mapfiles/ms/micons/green.png',
      // (width,height)
      new google.maps.Size(44, 32),
      // The origin point (x,y)
      new google.maps.Point(0, 0),
      // The anchor point (x,y)
      new google.maps.Point(22, 32))
  };


  var showMap_selected = function() {
    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(lattitude_value, longitude_value),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
    return map;
  };
}

function initialize() {
  var instance = new GoogleMap_selected();
  instance.initialize();
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#selected_map_canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="panel">
  <input type="text" id="slectedLat" value="32.715738"></input>
  <input type="text" id="slectedLon" value="-117.1610838"></input>
</div>
<div id="selected_map_canvas"></div>
<div id="directions-panel"></div>