Polymer Can'；t将用户位置传递给ajax调用，以从Foursquare获取场地_Polymer

Polymer Can'；t将用户位置传递给ajax调用，以从Foursquare获取场地

polymer

Polymer Can'；t将用户位置传递给ajax调用，以从Foursquare获取场地,polymer,Polymer,我正在用Polymer、谷歌地图和Foursquare API制作一个应用程序，但我被卡住了。这个想法是向用户展示附近的场地，这些场地是从Foursquare返回的。我正在使用从Foursquare获取场地我已经创建了一个自定义元素，我正在使用geolocation获取用户的位置，并尝试将其传递给。当我手动传递纬度和经度时，AJAX调用非常有效，但是当我尝试将值更改为geolocation值时，AJAX调用中断模板： <template> <geo-location w

我正在用Polymer、谷歌地图和Foursquare API制作一个应用程序，但我被卡住了。这个想法是向用户展示附近的场地，这些场地是从Foursquare返回的。我正在使用

从Foursquare获取场地

我已经创建了一个自定义元素，我正在使用

geolocation

获取用户的位置，并尝试将其传递给

。当我手动传递纬度和经度时，AJAX调用非常有效，但是当我尝试将值更改为

geolocation

值时，AJAX调用中断

模板：

<template>
  <geo-location watch-pos latitude="{{ latitude }}" longitude="{{ longitude }}"></geo-location>
  <google-map latitude="[[latitude]]" longitude="[[longitude]]" zoom="13" api-key="AIzaSyCZ52mvUoJplSOmOFE2KW0u5v6jny870IM">
  <!--  <google-map-marker latitude="[[latitude]]" longitude="[[longitude]]" draggable="true"></google-map-marker>-->
  </google-map>

  <iron-ajax
    auto
    url="https://api.foursquare.com/v2/venues/search?"
    params="{{ajaxParams}}"
    last-response="{{data}}"
    handle-as="json"
    >
    </iron-ajax>
  <template is="dom-repeat" items="[[data.response.venues]]">
    <span>{{item.name}}</span>

  </template>

<script>
Polymer({
  is: 'my-list',

  properties: {
        client_id: {
            type: String,
            value: 'THIS IS MY CLIENT_ID'
        },
        client_secret: {
            type: String,
            value: 'THIS IS MY CLIENT_SECRET'
        },
        v: {
            type: Number,
            value: '20150729'
        },
        limit: {
            type: Number,
            value: '10'
        },
        ll: {
            type: String,
            value:
              getCurrentLat(function(pos){
                console.log(pos);
              })
        },
        ajaxParams: {
            type: String,
            computed: 'processParams(client_id, client_secret, v, limit, ll)'
        }
    },

    processParams: function(client_id, client_secret, v, limit, ll) {
        return {
        client_id: client_id,
        client_secret: client_secret,
        v: v,
        limit:limit,
        ll: ll
      };
    }
});

function getCurrentLat(callback) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        callback(position.coords.latitude + ", " + position.coords.longitude);
    });
  } else {
    console.log("Unable to access your geolocation");
  }
}

ll: {
    type: String,
    value:
         getCurrentLat(function(pos){
            console.log(pos);
         })
},

例如，每当我将

ll

值设置为

'60,25'

时，AJAX调用都会返回正确的结果。此外，上面的

console.log

正确地打印了用户的位置（类似于

60、24

），但我不知道如何将

pos

设置为值。

首先，您的

ll

属性声明有一个无效的

值

字段，该字段用于提供初始值。它不打算像您正在尝试的那样设置回调。最初，您可能应该将该字段留空：

Polymer({
  ...
  properties: {
    ll: String
  }
});

ll

的值可以在JavaScript中强制设置（即

this.ll=position；

），也可以在标记中通过数据绑定声明设置（即

）。由于

ll

值需要从

navigator.geolocation.getCurrentPosition

异步来，我们可以从聚合物元素的生命周期回调调用它（例如，

attached

），然后在

geolocation

回调中强制设置

ll

：

Polymer({
  ...
  attached: function() {
    getCurrentLat(function(position) {
      this.ll = position;
    }.bind(this));
  }
});

但看起来您也在使用元素，它已经为您读取当前纬度/经度并提供实时更新，因此您实际上不需要自己使用

navigator.geolocation

（在您的情况下是一次性更新）

代替上述更改，您可以修改

ajaxParams

计算属性，使其基于现有的

纬度

和

经度

属性（由

填充）：

这也将允许您摆脱

getCurrentLat（）

请注意，自Chrome 50起，地理定位API为。如果您尝试从

http

而不是

https

使用它，您会注意到控制台警告：