Question

我的vue组件是这样的：

new Vue({
    el: '#app',
    template: `
        <div>
            <select v-model="selectedCity">
                <option v-for="city in cities" :value="city.id">{{city.name}}</option>
            </select>
            <h4>Selected city key: {{selectedCity}}</div>
        </div>
    `,
    data: {
        cities: [
            {id: 1, name: "Manchester"},
            {id: 2, name: "London"},
            {id: 3, name: "Liverpool"},
            {id: 4, name: "Leicester"},
            {id: 5, name: "Southampton"}
        ],
        selectedCity: ""
    }
});

这样的演示：https://jsfiddle.net/3x0z3vzk/38/

我想如果点击一个城市，它会在谷歌地图中显示该城市

例如，我在组合框中选择伦敦，它将在谷歌地图上显示伦敦

我该怎么做？

Answer 1

这应该足以帮助你朝着正确的方向前进。

https://jsfiddle.net/jacobgoh101/pojy5htn/12/

e.g。

new Vue({
  el: '#app',
  template: `
        <div>
            <select v-model="selectedCity">
                <option v-for="city in cities" :value="city.id">{{city.name}}</option>
            </select>
            <h4>Selected city key: {{selectedCity}}</div>
        </div>
    `,
  data: {
    cities: [{
        id: 1,
        name: "Manchester",
        lat: 53.480759,
        lng: -2.242631
      },
      {
        id: 2,
        name: "London",
        lat: 51.507351,
        lng: -0.127758
      }
    ],
    selectedCity: ""
  },
  mounted() {
    var mapProp = {
      center: new google.maps.LatLng(0, 0),
      zoom: 5,
    };
    this.map = new google.maps.Map(document.getElementById("map"), mapProp);
  },
  created() {
    this.map = null;
    this.mark = null;
  },
  watch: {
    selectedCity(v) {
      // get the selecte city
      const city = this.cities.filter(obj => obj.id === v).pop();

      //this remove the previous marker on the map
      if (this.mark) this.mark.setMap(null);

      // set map center to the location
      this.map.setCenter({
        lat: city.lat,
        lng: city.lng
      });

      // create a marker for the city and assign it to `this.map`
      this.mark = new google.maps.Marker({
        position: {
          lat: city.lat,
          lng: city.lng
        },
        map: this.map,
        draggable:true,
      });
    }
  }
});

如何在vue组件上的谷歌地图中显示选定的组合框城市？

1 个答案: