Google Maps Geocode意外的属性位置

时间:2019-05-03 08:12:34

标签: javascript google-maps vue.js google-maps-api-3

我正在尝试为我的vue.js应用设置地理编码。我没有使用任何第三方库,只有通过npm安装的google地图。

调用地址解析方法时,会引发错误,指出属性位置意外。我已经尝试过“位置”,“ latlng”,坐标本身等等。经度和纬度来自navigator.geolocation对象。

这是我的设置脚本的一部分:

Vue.component('catalog', require('./components/Catalog'));
Vue.component('address-autocomplete', require('./components/AddressAutoComplete'));
window.googleMapsClient = require('@google/maps').createClient({
    key: "MY_API_KEY"
});

还有我的Vue组件:

getLocationFromGeoData() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            this.setLocation,
            this.showError
        );
    } else {
        showLocationError("Geolocation wird nicht unterstützt!");
    }
},
setLocation(position) {
    var self = this;

    this.location.latitude = position.coords.latitude;
    this.location.longitude = position.coords.longitude;

    var latLng = {
        lat: parseFloat(this.location.latitude),
        lng: parseFloat(this.location.longitude)
    };

    googleMapsClient.geocode({'location': latLng}).asPromise()
        .then((response) => {
            self.location.address = results[1].formatted_address;
        }).catch((err) => {
            showLocationError(err);
        });
},

2 个答案:

答案 0 :(得分:0)

public partial class memyContext : DbContext { public memyContext() { } public memyContext(DbContextOptions<memyContext> options) : base(options) { } public DbSet<Memy> Memy { get; set; } protected override void OnModelCreating(ModelBuilder modelBuilder) { modelBuilder.Entity<Memy>(entity => { entity.HasKey(e => e.IdMema); entity.Property(e => e.IdMema) .HasColumnName("Id_mema") .ValueGeneratedNever(); entity.Property(e => e.Autor) .HasColumnName("autor") .HasColumnType("text"); entity.Property(e => e.Title) .HasColumnName("title") .HasColumnType("text"); entity.Property(e => e.releaseDate) .HasColumnName("relaseDate") .HasColumnType("date"); entity.Property(e => e.modifyDate) .HasColumnName("modifyDate") .HasColumnType("date"); entity.Property(e => e.Description) .HasColumnName("opis") .HasColumnType("text"); entity.Property(e => e.coverImg) .HasColumnName("img"); entity.Property(e => e.Category) .HasColumnName("kategoria") .HasColumnType("text"); entity.Property(e => e.Dislike).HasColumnName("dislike"); entity.Property(e => e.Like).HasColumnName("like"); }); } // public DbSet<MemeGenerator.Models.Mems> Mems { get; set; } // public DbSet<MemeGenerator.Models.AppSettings> AppSettings { get; set; } } 是类DoccatModel model; if(model_file.exists()) { model = new DoccatModel(model_file); } else { model = trainedModel(trainingDatasetPath); serializeModel(model); } DocumentCategorizer doccat = new DocumentCategorizerME(model); -https://developers.google.com/maps/documentation/javascript/geocoding的方法。

geocode

答案 1 :(得分:0)

请注意,您尝试将坐标解析为该地址。此过程通常称为反向地理编码。这意味着您必须使用.reverseGeocode(query, callback)方法而不是.geocode(query, callback)方法。

您的代码应更改为类似于

var latLng = {
    lat: parseFloat(this.location.latitude),
    lng: parseFloat(this.location.longitude)
};

googleMapsClient.reverseGeocode({'latlng': latLng}).asPromise()
    .then((response) => {
        self.location.address = results[1].formatted_address;
    }).catch((err) => {
        showLocationError(err);
    });

有关更多详细信息,请访问以下地址查看Node.js的Maps Web服务客户端库的文档

https://googlemaps.github.io/google-maps-services-js/docs/GoogleMapsClient.html

我希望这会有所帮助!