代码之家 › 专栏 › 技术社区 › lebanta

如何在谷歌地图的Api方向上更改航点样式?

directions routes google-maps angular javascript

0

lebanta · 技术社区 · 2 年前

我有一个问题,在谷歌地图API添加单独的标记。我搜索了很多像以下链接, Change individual markers in google maps directions 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;
        }
        }

有人能建议我如何在代码的起点和终点添加标记吗。

0 回复 | 直到 5 年前

1

20

geocodezip 5 年前

变化:

将map变量传递给makeMarker函数(正如DrMolle所观察到的那样)
将图标URL更改为在我的服务器上工作的URL
移动添加标记的代码,使其仅在路由请求成功时运行

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;
    };
}

代码片段:

// 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>