javascript - 每当用户使用谷歌地图 API 将图钉拖动到任何地方时，如何获取用户的新纬度、朗度

Question

我正在构建一个网络应用程序，它实际上允许用户查看所选地址的标记。另外，我正在尝试构建一个功能，当用户拖动图钉时，它应该更新 lat、lang 值。虽然我能够使用下面的代码获取用户的当前位置，但最大的问题是每当用户将图钉拖动到任何地方时如何获取用户的新纬度、朗？非常感谢任何回复，谢谢。顺便说一句，我正在使用这个插件 https://github.com/asennikov/ember-g-map

/component.js

    getCurrentLocation() {
      if (navigator.geolocation) {
        console.log(navigator.geolocation);
        navigator.geolocation.getCurrentPosition((position) => {
         this.set('selectedLatitude', position.coords.latitude);
         this.set('selectedLongitude', position.coords.longitude);
         this.set('hasSelectedFromAutoCompleteOrCurrentLocation', true);

         this.reverseGeoCode(position.coords.latitude, position.coords.longitude).then((resp) => {
           this.set('formattedAddress', resp);
         }).catch((error) => console.log(error));

       });
      } else {
        console.log("Your browser doesn't support geo location");
      }
    },

/template.hbs

    {{#g-map lat=cityLatitude lng=cityLongitude zoom=zoomValue options=mapOptions as |context|}}
      {{#if hasSelectedFromAutoCompleteOrCurrentLocation}}
        {{g-map-marker context lat=selectedLatitude lng=selectedLongitude onDrag=(action "getCurrentLocation") draggable=true zoom=zoomValue icon=myIcon}}
      {{/if}}
    {{/g-map}}

Answer 1

Ola @Mikelemuel，谢谢您的问题! 🎉

我已经能够使用我在本地创建的快速示例应用程序解决您的问题，我认为您可能遇到的部分问题是您正在重载 getCurrentLocation() 来执行以下操作太多的事情🤔让我解释一下......

首先，我不太明白您在用例中想要做什么。我假设，因为您正在使用 navigator.geolocation 功能，您希望 map 使用用户的当前位置进行初始化，然后他们应该能够拖动图标来选择更具体的位置。因此，我已将 navigator.geolocation 实现移至组件的 init() 函数，并简化了 onDrag 实现以获取传入的属性。

// app/components/map.js
import Component from '@ember/component';

export default Component.extend({
  init() {
    this._super(...arguments);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.set('selectedLatitude', position.coords.latitude);
        this.set('selectedLongitude', position.coords.longitude);
        this.set('hasSelectedFromAutoCompleteOrCurrentLocation', true);

        this.reverseGeoCode(position.coords.latitude, position.coords.longitude).then((resp) => {
          this.set('formattedAddress', resp);
        }).catch((error) => console.log(error));

      });
    } else {
      console.log("Your browser doesn't support geo location");
    }
  },

  actions: {
    updateLocation(lat, lon) {
      this.set('selectedLatitude', lat);
      this.set('selectedLongitude', lon);
    },
  }
});

这将首先使用当前位置的标记更新 map ，然后允许用户拖动该标记，从而更新 selectedLatitude 和 selectedLatitude。我已在模板中添加了一个输出，只是为了显示其实际效果:

<!-- app/templates/components/map.hbs -->
{{#g-map lat=53 lng=-7 zoom=8 options=mapOptions as |context|}}
  {{#if hasSelectedFromAutoCompleteOrCurrentLocation}}
    {{g-map-marker context lat=selectedLatitude lng=selectedLongitude onDrag=(action "updateLocation") draggable=true zoom=zoomValue icon=myIcon}}
  {{/if}}
{{/g-map}}

<p>Lat {{this.selectedLatitude}} Lon: {{this.selectedLongitude}}</p>

您会注意到，我在示例中更新了 lat=cityLatitude lng=cityLongitude Zoom=zoomValue 值，以便它大致显示我所在的位置 😂 大致指向爱尔兰🇮🇪

这是一个工作示例:

注意:我已经拖动了一次标记，这样我就不会透露我的确切位置😉，但它在初始加载时确实按预期工作👍