我如何在vue组件中实现谷歌地图？ [英] How can I implement google map in the vue component?

问题描述

我从这里获得参考信息：如何从Google版本地图中的拖动标记中获取格式化地址

它使用javascript

我想在vue组件中实现它

我试试这样：

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

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

如果我点击geocode按钮，就会出现这样的错误：

  Uncaught ReferenceError：marker未定义
  

如何解决错误？

解决方案

new Vue（{
el：'#app'，
模板：`
< div>
<输入ID =地址type =textboxvalue =Sydney，NSW>
< input type =buttonvalue =Geocode@ click =codeAddress（）>
< / div>
`，
data（）{
return {
geocoder：null，
map：null，
marker：null，
infowindow：null
}
}，
（）{
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（ response&& response.length> 0）{
this.marker.formatted_address = responses [0] .formatted_address
} else {
this.marker.formatted_address ='无法确定地址'
}
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：+ t his.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，'点击'）;
} else {
alert（'由于以下原因，地理编码不成功：+状态）;
}
}）;


}）


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

I get reference from here : How to get the formatted address from a dragged marker in Google Version Maps

It using javascript

I want to implement it in the vue component

I try like this :

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

I don't type code here. Because the code is too much. So you can directly see in jsfiddle

If I click geocode button, there exist error like this :

Uncaught ReferenceError: marker is not defined

How can I solve the error?

解决方案

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

You should store globe value in the data of Vue component, and get the value by this.name in you methods.

这篇关于我如何在vue组件中实现谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！