首页 文章

使用方向服务谷歌 Map 没有离子3

提问于
浏览 次
0

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

我跟随最好的法庭 .

首先创建 Map ，下载插件插件@ 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);

之后，当点击这些点执行一个应该构建我创建它的点的路径的函数时，获取一些点放在 Map 上 . 功能是这种形式：

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 并且一切都运行正常，但为此它无法正常工作 . 我知道，对于插件本身我不能这样做但是我想要获得积分并且我自己在 Map 上设置这些点 .

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

google-maps ionic3

1 回答

  • 0
    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);
}
    回复于

相关问题