流星反应地图不应该正常工作

Question

我正在使用两个名为dburles:google-maps和mdg:geolocation的精彩软件包。当我获得用户的地理位置数据（在他允许共享之后）时，我需要添加标记并自动更改地图的缩放。

在Template.onCreated内我有以下代码：

Template.dealersMap.onCreated(function() {
    Tracker.autorun(() => {
       this.latLng = new ReactiveVar(Geolocation.latLng());
    })
});

然后在onRendered我执行以下操作：

Template.dealersMap.onRendered(function() {
  navigator.geolocation.getCurrentPosition((position) => {
    GoogleMaps.ready('exampleMap', (map) => {
      let marker;

      if(!this.latLng.get())
        console.log('Didn\'t get the location..');

      if(!marker) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(
              this.latLng.get().lat, 
              this.latLng.get().lng
          ),
          map: map.instance
        });
      } else {
        marker.setPosition(this.latLng.get());
      }
      map.instance.setCenter(marker.getPosition());
      map.instance.setZoom(11);
    }, () => {
      console.log('deny');
    });
  })
});

结果是用户允许我获取他的地理数据后没有任何反应。 但如果用户更改了至少一个步骤地图缩放 - 一切正常。

问题是 - 如何在不让用户更改地图缩放的情况下使此代码正常工作？

Answer 1

我刚删除了navigator.geolocation.getCurrentPosition，现在一切正常。以下是成功的代码：

Template.dealersMap.onCreated(function() {
  this.latLng = new ReactiveVar();
  Tracker.autorun(() => {
    this.latLng.set(Geolocation.latLng());
  })
});


Template.dealersMap.onRendered(function() {

  this.autorun(() => {
    GoogleMaps.ready('exampleMap', (map) => {
      console.log('map is ready');


      let marker;

      if(!this.latLng.get()) {
        console.log('Didn\'t get the location..');
      } else {
        if(!marker) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(
              this.latLng.get()
              .lat,
              this.latLng.get()
              .lng
            ),
            map: map.instance
          });
        } else {
          marker.setPosition(this.latLng.get());
        }
      }
      map.instance.setCenter(marker.getPosition());
      map.instance.setZoom(11);
    })
  })
});

Answer 2

一旦dta改变，您可以使用Tracker重新运行，一旦使用共享他/她的位置，标记就会被触发。以下是示例代码：

Template.dealersMap.onRendered(function() {
var self=this;
navigator.geolocation.getCurrentPosition((position) => {
GoogleMaps.ready('exampleMap', (map) => {
  self.autorun(function() {   //tracker function
  let marker;

  if(!this.latLng.get())
    console.log('Didn\'t get the location..');

  if(!marker) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(
          this.latLng.get().lat, 
          this.latLng.get().lng
      ),
      map: map.instance
    });
  } else {
    marker.setPosition(this.latLng.get());
  }
  map.instance.setCenter(marker.getPosition());
  map.instance.setZoom(11);
}, () => {
  console.log('deny');
}
});
})
});