Question

我尝试使用directionService绘制从A点到B点的折线。

我跟随最好的法庭。

首先创建地图，下载插件插件@ ionic-native / google-maps

 let mapOptions: GoogleMapOptions = {
 camera: {
    target: {
      lat: 0,
      lng: 0
    },
    zoom: 16, //14
    bearing: 0
 },
 controls: {
   compass: true,
   myLocationButton: true,
   mapToolbar: false
 },
 gestures: {
   scroll: true,
   tilt: true,
   rotate: false,
   zoom: true
 },
 };
 this.message = 'map_is_ready';
 let mapElement: HTMLElement = document.getElementById('map');
 this.map = GoogleMaps.create(mapElement, mapOptions);
 this.map.setVisible(true);

之后，获取一些点放在地图上，当点击这些点执行一个函数时，该函数应构建我创建它的点的路径。函数采用以下形式：

setPolylineDirectionMyAndPoint(start, end) {
  const request = { // Novo objeto google.maps.DirectionsRequest, contendo:
    origin: start, // origem
    destination: end, // destino
    travelMode: google.maps.TravelMode.WALKING // meio de transporte, nesse caso, apé
  };

  this.directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      const plyPath = [];
      const legs = result.routes[0].legs;
      for (let i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (let j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (let k = 0; k < nextSegment.length; k++) {
            plyPath.push(nextSegment[k]);
          }
        }
      }
      const polyline = new google.maps.Polyline({
        path: plyPath,
        strokeColor: '#0032e9',
        strokeWeight: 8
      });
    }
  });
}

我做了这个尝试，并尝试通过插件本身创建：

let polylineOptions = {
  points: plyPath,
  'color': '# 0032e9',
  'width': 8,
  'geodesic': true,
};
this.map.addPolyline (polylineOptions) .then ((polyline: Polyline) => {
});

但它给出了一个错误，说addPolyline不是一个函数，我创建了几个polylines并且一切都运行正常，但为此它无法正常工作。我知道，对于插件本身我不能这样做但是我试图获得积分并且我自己在地图上设置这些点。

如何解决这个问题？我需要从我到我点击的路径。

Answer 1

directionservice() {


    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(this.mapkill);
    directionsService.route({
      origin: myLocation.latLng,
      destination: this.end,
      travelMode: google.maps.TravelMode['DRIVING']
    }, (res, status) => {

      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(res);
        console.log("resresres", JSON.stringify(res["distance"]), "resresres");
        this.dir_result = res.routes[0].overview_path;

        // var startMarker = this.mapkill.addMarker({ position: res["routes"][0]["legs"][0]["start_location"], map: this.mapkill, icon: 'assets/img/car1x.png' });
        // console.log(this.end, "this.endthis.end");

        // this.mapkill.addMarker({ position: res["routes"][0]["legs"][0]["start_location"], map: this.mapkill, icon: 'assets/img/car1x.png' }).then(marker => {
        //   this.marker = marker;
        // });
        // this.marker.setPosition(res["routes"][0]["legs"][0]["start_location"]);
        // this.marker.setRotation(this.sss);

        var stopMarker = this.mapkill.addMarker({ position: res["routes"][0]["legs"][0]["end_location"], map: this.mapkill, icon: 'assets/img/map_icon_new.png', snippet: this.end });
        this._km = res["routes"][0]["legs"][0]["distance"]["text"];
        this._timz = res["routes"][0]["legs"][0]["duration"]["text"];
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(res["routes"][0]["legs"][0]["start_location"]);
        bounds.extend(res["routes"][0]["legs"][0]["end_location"]);

        var strr_lat = { lat: res["routes"][0]["legs"][0]["start_location"].lat(), lng: res["routes"][0]["legs"][0]["start_location"].lng() };

        // var strr_lng: number = res["routes"][0]["legs"][0]["start_location"][0]["lng"];


        var eendxxx_lat = {
          lat: res["routes"][0]["legs"][0]["end_location"].lat(), lng: res["routes"][0]["legs"][0]["end_location"].lng()
        };


        this.centerrr = [strr_lat, eendxxx_lat];
        console.log(JSON.stringify(this.centerrr), "11111111111111");


        console.log(JSON.stringify(res["routes"][0]["legs"][0]["duration"]), "res1[");

        this.mapkill.animateCamera({
          'target': this.centerrr,//location.latLng,
          //'tilt': 20,
          zoom: 11,
          'bearing': 25,
          'duration': 800 // 1/2 seconds
        })

        setTimeout(() => {
          this.mapkill.animateCamera({
            'target': myLocation.latLng,//location.latLng,
            //'tilt': 20,
            zoom: 18,
            'bearing': 25,
            'duration': 800 // 1/2 seconds
          })
        }, 3000);


        this.mapkill.on(GoogleMapsEvent.MY_LOCATION_BUTTON_CLICK).subscribe(() => {

          this.mapkill.animateCamera({
            'target': myLocation.latLng,//location.latLng,
            //'tilt': 20,
            zoom: 18,
            'bearing': 25,
            'duration': 800 // 1/2 seconds
          })
        });



        let gfdf = [];
        let e = 0;
        this.dir_result.forEach(function (value, key) {
          // if (e <= 10) {


          gfdf.push({
            lat: value.lat(),
            lng: value.lng()
          });



        });
        this.MAKER = gfdf;


        //this.mapkill.remove();
        let polyline: Polyline = this.mapkill.addPolylineSync({
          points: this.MAKER,
          color: '#ef7f1a',
          //center: startMarker,
          width: 10,
          geodesic: true,
          clickable: true  // clickable = false in default
        });

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

        });
      } else {
        console.log(status);
      }

    });
  })
  //}, 4500);
}

使用方向服务google maps no ionic 3

1 个答案: