0

我的主页中有一个搜索表单，其中包含输入框和选择下拉菜单。用户可以通过键入位置或通过 html5 地理位置来搜索其他用户。因此，当用户第一次访问该页面时，它会询问用户是否让应用知道他们的位置。如果他们同意，则从下拉列表中选择纬度经度和选择的选项并运行数据库查询。但是，我不确定我的以下尝试是否应该是这样。因为我还想在用户使用或不使用地理位置进行搜索时绑定选择。我的选择输入是

<div class="input-group-btn">
  <select class="btn btn-danger btn-lg" style="border-radius: 0px;" bindon-ngModel="btype" on-ngModelChange="search($event)" on-ngModelChange="successPosition($event)" name="btype" >
      <option *ngFor="let btype of bloodtypes" [value]="btype">{{btype}}</option>
  </select>
</div>

我在 angular2 组件中的地理定位功能看起来像这样

geolocation: function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.successPosition,
            this.failurePosition, { 
                                    enableHighAccuracy: true, 
                                    timeout:3000,
                                    maximumAge: 4000 });
    }
    else{
        return(false);
    }
},
successPosition: function(position){
    if(position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    }else{
        self.btype = position;
    }
    window.location.replace("/users?utf8=✓&amp;longitude=" + 
         encodeURIComponent(self.longitude) + "&latitude=" + 
         encodeURIComponent(self.latitude) + "&btype=" + 
         encodeURIComponent(self.btype));
    },

但是当successPosition()收到我无法分配的参数时latitude，longitude同时btype。如果我分配latitudeand longitude，btype则未定义，反之亦然。请告诉我这是我该怎么做还是有另一种方法？

4

2 回答 2

0

这就是你要找的东西：

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&amp;longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}
于 2017-08-24T02:15:20.920 回答
-1

添加到上面 Sonicd300 的答案中，问题实际上出在successPosition函数中的 if-else 块上。在上面的答案中，他为您提供了通过提供三元运算符来重写函数的选项，请在此处阅读更多信息 - Javascript 一行 If...else...else if 语句

你可以重写这个 -

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&amp;longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

通过编写此内容并指定默认经度和纬度，以防用户在页面加载时未提供。

successPosition: function(position) {
    self.btype = position;
    if (position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    } else {
    self.latitude = 'assign some default latitude'; // you should never assume that this will always be provided by the user on page load
    self.longitude = 'assign some default longitute'
}
window.location.replace("/users?utf8=✓&amp;longitude=" + 
     encodeURIComponent(self.longitude) + "&latitude=" + 
     encodeURIComponent(self.latitude) + "&btype=" + 
     encodeURIComponent(self.btype));
}
于 2017-08-24T13:48:04.150 回答