未在聚合物上显示位置（使用 Google 地图）答案

【问题标题】：Not showing location on polymer (working with Google Maps)未在聚合物上显示位置（使用 Google 地图）
【发布时间】：2015-02-03 14:10:36
【问题描述】：

我想在网络中获取设备的位置，然后在 Google 地图上显示它。脚本正确获取坐标，但是当我想在模板中使用它时，它不起作用。

这是我的脚本，并且正在正确获取我的坐标：

<script>

Polymer({

  latitude: null,
  longitude: null,

  ready: function(){
    this.getLocation();
  },

  getLocation: function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else { 
    }
  },

  showPosition: function(position) {
    console.log(position);
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      console.log(this.latitude+' / '+this.longitude);
  },

});
</script>

但是在我的模板中，当我使用这条线时不起作用，我不知道为什么。

  <google-map id="google_map" latitude="{{latitude}}" longitude="{{longitude}}"></google-map>

如果我通过 {{position}} 更改经度参数 {{latitude}} 和 {{longitude}}，则得到每个字段中纬度和经度的总和。

有什么想法吗？谢谢！

PS：这是代码的一部分。显然我已经在 Polymer 中导入了谷歌地图的元素。

【问题讨论】：

尝试将纬度和经度存储在变量中，并使用正常工作的脚本进行设置，然后尝试使用声明的变量不工作的代码。
我不知道它坏在哪里，但首先是看看你是否能看到一张已知纬度和经度值的地图。不要使用数据绑定。如果您没有看到地图，则说明您没有为地图设置高度。获得地图显示后，您应该可以使用绑定。完整的代码也很好。

标签： html google-maps geolocation polymer

【解决方案1】：

使用geolocation 元素为我解决这个问题是一种优雅的方式，使用网络组件。

你可以在the demo page找到如何使用它。

使用 bower 很容易将其添加到您的项目中：

bower install ebidel/geo-location --save

在您的代码中，您只需添加 HTML 导入并使用组件：

<link rel="import" href="../bower_components/geo-location/geo-location.html">

<geo-location watch-pos latitude="{{ latitude }}" longitude="{{ longitude }}"></geo-location>

这个网络组件暴露了用户的位置。然后您可以使用{{ latitude }} 和{{ longitude }} 访问坐标。好消息是，如果您使用移动设备移动，位置会实时更新（参见演示页面执行）。

【讨论】：

您的回答很好，但是，它不适用于 OS X 和 iOS 上的 Safari。