Google Maps-隐藏目的地标记 [英] Google Maps - Hide destination marker

问题描述

我正在尝试在Google地图上显示一些命中标记，并显示从头到尾的路线.

I am trying to display some hit markers on google maps, and display a route from start to finish.

我已经显示了路线，但是我的起点和终点坐标完全相同，导致终点标记(标记"D")与起点标记重叠，显示在下面:

I've got the route displaying, but my origin and destination have the exact same co-ordinates, causing the destination marker (marker 'D') to overlap the origin marker, this is displayed below:

地图上的航点标记

理想情况下，我只想隐藏目标标记，但是我绝对不知道如何隐藏单个标记.

Ideally i'd like to hide just the destination marker, but I have absolutely no idea how to suppress an individual marker.

     displayRoute(directionsService, directionsDisplay) {
    let numberOfHits = this.geo.Data.rows.length - 1;
    let firstHit = this.geo.Data.rows[numberOfHits];
    let lastHit = this.geo.Data.rows[0];
    let wayPoint, i;
    let wayPointsArray = [];

    this.checkForDuplicates('Id', this.geo.Data.rows);

    for (i = 1; i < numberOfHits; i++) {
      wayPoint = this.geo.Data.rows[i];

      if (this.duplicatesArr.indexOf(wayPoint.Id) === -1) {
        wayPointsArray.unshift({
          location: {
            lat: wayPoint.latitude,
            lng: wayPoint.longitude
          }
        });
      } else if (this.duplicatesArr.indexOf(wayPoint.Id) > -1) {
        console.log('wayPoint', wayPoint.Id, 'has already been hit')
      }
    }

    let request = {
      origin: {
        lat: firstHit.latitude,
        lng: firstHit.longitude
      },
      destination: {
        lat: lastHit.latitude,
        lng: lastHit.longitude
      },
      waypoints: wayPointsArray,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    if((request.origin.lat == request.destination.lat) && (request.origin.lng == request.destination.lng)) {
      // Code to hide destination marker
    }

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

地理数据

this.geo = {
     "Data": {
      "records": 7,
      "total": 1,
      "page": 1,
      "rows": [
        {
          "Id": 2778,
          "latitude": 51.509697,
          "longitude": -2.2
        },
        {
          "Id": 53,
          "latitude": 50.980598,
          "longitude": -1.36827
        },
        {
          "Id": 2750,
          "latitude": 51.152599,
          "longitude": -1.34676
        },
        {
          "Id": 2778,
          "latitude": 51.509697,
          "longitude": -2.2
        }
      ]
    }
  }

任何帮助，将不胜感激！

Any help with this would be greatly appreciated!

编辑

抱歉，为清楚起见，这是我创建DirectionsDisplay的地方:

My apologies, for clarity here is where I've created the directionsDisplay:

  createMap() {
let directionsDisplay = new google.maps.DirectionsRenderer;
let directionsService = new google.maps.DirectionsService;

let map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

let bounds = new google.maps.LatLngBounds();
map.fitBounds(bounds);

directionsDisplay.setMap(map);
this.displayRoute(directionsService, directionsDisplay);

};

这是在displayRoute()函数之前使用的

This is used just before the displayRoute() function

推荐答案

DirectionsRendererOptions 具有suppressMarkers属性.

这将同时隐藏起点和终点标记.

This will hide both origin and destination markers.

然后，您可以在原点坐标处简单地添加自己的标记.基于您发布的代码的示例:

You can then simply add your own marker at the origin coordinates. An example based on the code you posted:

if ((request.origin.lat == request.destination.lat) && (request.origin.lng == request.destination.lng)) {

  // Code to hide destination marker

  var rendererOptions = {
    suppressMarkers: true,
  };

  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(request.origin.lat, request.origin.lng),
    map: map
  });

} else {

  var directionsDisplay = new google.maps.DirectionsRenderer();
}

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

您没有发布完整的代码，因此上述内容意味着您删除了var directionsDisplay = new google.maps.DirectionsRenderer();

You didn't post your complete code, so the above implies that you remove your (not included) initialization of var directionsDisplay = new google.maps.DirectionsRenderer();

这篇关于Google Maps-隐藏目的地标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！