Блог

У меня есть ионное приложение, использующее полилинию Google Maps для получения широты и долготы из API data json для маршрута полета. я пытаюсь добавить значок самолета в конец полилинии

Смотрите пример

но я получаю только полилинию без icone. я пробовал этот документ с карты Google, но он не работает

мой код

     loadMap() {


        let AIR_PORTS = this.points;
        console.log(AIR_PORTS)

        this.map = GoogleMaps.create('map_canvas', {
          camera: {
            target: AIR_PORTS
          }
        });

 let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 3,
      geodesic: true,
      clickable: true,
      icon: {
        scale: .5,
        strokeWeight: 2,
        strokeColor: 'green',
        path: 'm 0,28.362183 10.996094,-28.63281288 4.082031,0 11.71875,28.63281288 -4.316406,0 -3.339844,-8.671875 -11.9726563,0 -3.1445312,8.671875 z m 8.2617188,-11.757813 9.7070312,0 -2.988281,-7.9296874 c -0.911473,-2.4088321 -1.588555,-4.3879967 -2.03125,-5.9375 -0.364596,1.8359613 -0.878919,3.6588762 -1.542969,5.46875 z'
    },
    fixedRotation: true,
    offset: '0%'

    });



        polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
          let position: LatLng = <LatLng>params[0];

          let marker: Marker = this.map.addMarkerSync({
            position: position,
            title: position.toUrlValue(),
            disableAutoPan: true
          });
          marker.showInfoWindow();
        });
      }
  

Вы можете создать отдельный маркер для самолета и назвать его setPosition с той же точкой, что и конец полилинии. Чтобы изменить значок маркера, вы можете вызвать setIcon его

 function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });



  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];

  var marker = new google.maps.Marker();
  marker.setPosition(flightPlanCoordinates[0]);
    marker.setMap(map)

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}