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

Posted 2023-02-23

【中文标题】未在聚合物上显示位置（使用 Google 地图）

【英文标题】：Not showing location on polymer (working with Google Maps)

【发布时间】：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 中导入了谷歌地图的元素。

【问题讨论】：

尝试将纬度和经度存储在变量中，并使用正常工作的脚本进行设置，然后尝试使用声明的变量不工作的代码。

我不知道它坏在哪里，但首先是看看你是否能看到一张已知纬度和经度值的地图。不要使用数据绑定。如果您没有看到地图，则说明您没有为地图设置高度。获得地图显示后，您应该可以使用绑定。完整的代码也很好。

【参考方案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。