如何在 vue 组件中实现谷歌地图？

Question

我从这里得到参考：How to get the formatted address from a dragged marker in Google Version Maps

它使用javascript

我想在vue组件中实现

我尝试这样：

https://jsfiddle.net/oscar11/1krtvcfj/2/

我不在这里输入代码。因为代码太多了。所以在jsfiddle中可以直接看到

如果我点击地理编码按钮，就会出现这样的错误：

Uncaught ReferenceError: marker is not defined

我该如何解决这个错误？

Answer 1

new Vue({
  el: '#app',
  template: `
        <div>
            <input id="address" type="textbox" value="Sydney, NSW">
            <input type="button" value="Geocode" @click="codeAddress()">
        </div>
    `,
  data() {
    return {
      geocoder: null,
      map: null,
      marker: null,
      infowindow: null
    }
  },
  mounted() {
    this.infowindow = new google.maps.InfoWindow({
      size: new google.maps.Size(150, 50)
    })

    google.maps.event.addDomListener(window, "load", this.initialize)
  },
  methods: {
    initialize() {
      this.geocoder = new google.maps.Geocoder();
      let latlng = new google.maps.LatLng(-34.397, 150.644)
      let mapOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
      google.maps.event.addListener(this.map, 'click', () => {
        this.infowindow.close()
      });
    },
    geocodePosition(pos) {
      this.geocoder.geocode({
        latLng: pos
      }, responses => {
        if (responses && responses.length > 0) {
          this.marker.formatted_address = responses[0].formatted_address
        } else {
          this.marker.formatted_address = 'Cannot determine address at this location.'
        }
        this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6))
        this.infowindow.open(this.map, this.marker)
      });
    },
    codeAddress() {
      let address = document.getElementById('address').value;
      this.geocoder.geocode({
        'address': address
      }, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
          this.map.setCenter(results[0].geometry.location);
          if (this.marker) {
            this.marker.setMap(null);
            if (this.infowindow) this.infowindow.close();
          }
          this.marker = new google.maps.Marker({
            map: this.map,
            draggable: true,
            position: results[0].geometry.location
          });
          google.maps.event.addListener(this.marker, 'dragend', () => {
            this.geocodePosition(this.marker.getPosition());
          });
          google.maps.event.addListener(this.marker, 'click', () => {
            if (this.marker.formatted_address) {
              this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
            } else {
              this.infowindow.setContent(address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
            }
            this.infowindow.open(this.map, this.marker);
          });
          google.maps.event.trigger(this.marker, 'click');
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }
  }
})

你应该将地球值存储在Vue组件的data中，并在你的方法中通过this.name获取值。