如何将图标添加到谷歌折线

Question

我有一个 Ionic 应用程序，它使用谷歌地图折线从数据 json api 获取飞行路线的纬度和经度。我尝试在折线的末端添加图标飞机

查看示例

但我只得到没有 icone 的折线。 l tried this doc from google map but he doesn't work

我的代码

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

Answer 1

您可以为飞机创建一个单独的标记，并将其命名为 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);
}