如何將資料值系結到GoogleMapsAPI

我正在使用 Google Maps API 在我的 Vue 應用程式中進行一些地理編碼。在檔案中，它們顯示了獲取地址坐標的不同方法。例如。

https://maps.googleapis.com/maps/api/geocode/json?address=Washington&key=YOUR_API_KEY

但是，如果我想使用我已經存盤在我的應用程式中的地址怎么辦？現在我有顯示街道、街道號碼、郵政編碼和城市的欄位。所有這些都是從我自己的資料庫中獲取的。有什么方法可以將這些系結到 API？

<template>
  <b-form-row v-else class="col-md-12 m-0 p-0">
    <input label="street" v-model="addressInfo.streetName" @input="emitUpdateEvent" icon="fas fa-road"
                  class="col-md-4"/>
    <input label="numberAbbr" v-model="addressInfo.streetNumber" @input="emitUpdateEvent" icon="fas fa-hashtag"
                  class="col-md-2"/>
    <input label="floor" v-model="addressInfo.floor" @input="emitUpdateEvent" icon="fas fa-layer-group"
                  class="col-md-2"/>
    <input label="door" v-model="addressInfo.door" @input="emitUpdateEvent" icon="fas fa-door-closed"
                  class="col-md-2"/>
    <input label="placeName" v-model="addressInfo.placeName" @input="emitUpdateEvent" icon="fas fa-road"
                  class="col-md-4"/>
    <input label="postalCode" v-model="addressInfo.postalCode" @input="updatePostalCode" icon="fas fa-city"
                  class="col-md-2"/>
    <input label="city" v-model="addressInfo.city" @input="emitUpdateEvent" icon="fas fa-city" class="col-md-3"/>
  </b-form-row>
</template>

我想做這樣的事情：

https://maps.googleapis.com/maps/api/geocode/json?{ addressInfo.streetName   addressInfo.streetNumber   addressInfo.zipCode   addressInfo.postalCode etc. }&key=YOUR_API_KEY

我已經創建了一個名為“坐標”的欄位，用于存盤資料。

  getGeoLocationForUnit() {
    axios.get('https://maps.googleapis.com/maps/api/geocode/json?address=Washington&key=mykey')
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }

uj5u.com熱心網友回復：

你嘗試過這樣的事情嗎？我的意思是嘗試用逗號添加轉儲地址，如果這可行，那么您應該只為屬性映射資料創建計算。

axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=Washington,Street,Number&key=mykey`)

例子：

computed: {
 getFullAddress() {
  return this.addressInfo.streetName   ','   this.addressInfo.streetNumber   ','   this.addressInfo.zipCode   ','   this.addressInfo.postalCode;
 }
}

像這樣的東西：

axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=`   this.getFullAddress   `&key=mykey`)

uj5u.com熱心網友回復：

getGeoLocationForUnit() {
    const address = `${this.addressInfo.streetName} ${this.addressInfo.streetNumber} etc..`;
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=mykey`)
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }

uj5u.com熱心網友回復：

您正在尋找的是模板文字字串。用反引號而不是引號包裹的字串，簡單示例：

const name = 'John Smith';

const greeting = `Hello ${name}` // Outputs 'Hello John Smith"

對于您的用例，您甚至可以將地址資訊字串創建中斷為單獨的計算屬性，這將使

data: () => ({
  baseApiUrl: 'https://maps.googleapis.com/maps/api/geocode/json?',
}),
computed: {
  addressString() {
    const { streetName, streetNumber, zipCode, postalCode } = this.addressInfo
    return `${streetName} ${streetNumber}, ${zipCode} ${postalCode}`
  }
},
methods: {
  getGeoLocationForUnit() {
    const url = `${baseApiUrl}${addressString}&key=mykey`;
    axios.get(url)
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }
},

標籤：javascript api Vue.js 谷歌地图

上一篇：display:none在html和css中是否有不同的含義？[復制]

下一篇：為什么所有文本區域都在更改時更新？