如何将Google地图搜索结果仅限于一个国家?

时间:2017-06-09 09:31:57

标签: google-maps typescript ionic-framework

我正在开发一个Ionic应用程序,您可以使用起始地址和结束地址计划行程。但是,我想将此功能仅限于一个国家/地区。在写作之前,我一直在网上搜索解决方案,但没有一个能为我工作。

尝试过这些建议:

https://stackoverflow.com/a/8282093/8130808

https://stackoverflow.com/a/10170421/8130808

以下是我试图接近它的方法:

 //Places markers and displays a route, so the user can accept the current placing
  newRoutePlaceMarks(place: any): void {
    var googleDiplay = new google.maps.DirectionsRenderer({ draggable: true });

    var route = this.directionsDisplay;
    //A bit of a hack, sadly Typescript and google maps arent the best of buddies
    this.directionsService.route({
      origin: this.routeStart,
      destination: this.routeEnd,
      travelMode: 'DRIVING',
    }, function (response, status) {
      if (status === 'OK') {
        console.log("status is OK trying to put directions up");

        //The reason why I've set the addListener before the actual route is so it gets triggered
        //on the creation of the route. Had some problem with figuring out how to actually handle
        //the data when on the route creation, as this response function is in strict mode, and outside

        google.maps.event.addListener(route, "directions_changed", function () {
          console.log("Route changed");
          this.global = ShareService.getInstance();
          this.directions = route.getDirections();
          this.metersToDist = this.directions.routes[0].legs[0].distance.value;
          this.timeToDist = this.directions.routes[0].legs[0].duration.value;
          this.startAddress = this.directions.routes[0].legs[0].start_address;
          this.startCord = this.directions.routes[0].legs[0].start_location;
          this.endAddress = this.directions.routes[0].legs[0].end_address;
          this.endCord = this.directions.routes[0].legs[0].end_location;
          this.global.setMetersToDist(this.metersToDist);
          this.global.setTimeToDist(this.timeToDist);
          this.global.setStartAddress(this.startAddress);
          this.global.setStartCord(this.startCord);
          this.global.setEndAddress(this.endAddress);
          this.global.setEndCord(this.endCord);


          var options = {
            types:  ['geocode'],
            componentRestrictions: { country: "dk" }
          };
          google.maps.places.Autocomplete(this.startAddress, options);
        });


        //The actual initialiser for the route
        route.setDirections(response);

      } else {
        alert('Could not display route ' + status);
      }
    });
  }

我的问题是输入是HTTPELEMENT,我从警告对话框中获取输入

newRouteInput() {

    let alert = this.alertCtrl.create({
      title: 'New route',
      inputs: [
        {
          name: 'routeStart',
          placeholder: 'Start of route'
        },
        {
          name: 'routeEnd',
          placeholder: 'End of route'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Debug start and end',
          handler: data => {
            if (data.username !== "undefined") {
              console.log(data.routeStart + " " + data.routeEnd);
              this.routeStart = "Brøndby Strand";
              this.routeEnd = "Hvidovre";
              this.newRoutePlaceMarks(this.map);
              this.routeButton = false;

            } else {
              return false;
            }
          }
        },
        {
          text: 'Place route markers',
          handler: data => {
            if (data.username !== "undefined") {
              this.routeStart = data.routeStart;
              this.routeEnd = data.routeEnd;
              this.newRoutePlaceMarks(this.map);
              this.routeButton = false;
            } else {
              console.log(data.routeStart + " " + data.routeEnd);
              return false;
            }
          }
        }
      ]
    });
    alert.present();
  }

当我运行此操作时,由于this.startAddress而出错。它不是null,它包含起始地址:

InvalidValueError: not an instance of HTMLInputElement

0 个答案:

没有答案