每当用户使用 google 地图 api 将图钉拖动到任何地方时，如何获取用户的新纬度、语言

Question

我正在构建一个网络应用程序，它实际上允许用户查看所选地址的标记。此外，我正在尝试构建一项功能，当用户拖动图钉时，它应该更新纬度、经度值。虽然我能够使用下面的代码获取用户的当前位置，但最大的问题是 How can I get the new lat, lang of the user whenever the user drags the pin anywhere?非常感谢任何回复，谢谢。顺便说一句，我正在使用这个插件 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 功能，所以您希望地图使用用户的当前位置进行初始化，然后他们应该能够拖动图标来选择更具体的位置。因此，我已将 navigator.geolocation 实现移至组件的 init() 函数，并简化了 onDrag 实现以采用 passed-in 属性。

// 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);
    },
  }
});

这将首先使用当前位置的标记更新地图，然后允许用户拖动标记，从而更新 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 值，以便它可以大致显示我所在的位置，大致指向爱尔兰

这是一个工作示例：

注意：我已经拖动了标记一次，所以我没有透露我的确切位置，但它确实在初始加载时按预期工作

每当用户使用 google 地图 api 将图钉拖动到任何地方时，如何获取用户的新纬度、语言

How can I get the new lat, lang of the user whenever the user drags the pin anywhere using google map api

javascript

ember.js

ember-data

ember-cli