如何在Filter.js中使用Google Maps JavaScript API v3的地理編碼服務？

Question

我在網站上使用filter.js以及Google Maps API V3， 如其demo / example（filter.js）所示 ，只有一個區別，我的要求是使用地址而不是緯度或經度，據我所知可以使用Google Maps的地址解析服務來完成。 我必須修改一些代碼：

之前

addMarker: function(salon){
    var that = this;
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(salon.lat, salon.lng),
      map: this.map,
      title: salon.title
    });

    marker.info_window_content = salon.title + '<br/> Treatments: ' + salon.treatments + '<br/> Booking: ' + salon.bookings_1 + '<br/> Address: ' + salon.address + '<br/><a href="' + salon.permalink + '"> View Full Details </a>'
    this.markers[salon.id] = marker

    google.maps.event.addListener(marker, 'click', function() {
      that.infowindow.setContent(marker.info_window_content)
      that.infowindow.open(that.map,marker);
    });
  },

后

addMarker: function(salon){
    //new line for address 
    var salonaddress = salon.address1 + ' ' + salon.address2 + ' ' + salon.address3 + ', ' + salon.city + ', ' + salon.state + ' ' + salon.postal_code + ', ' + salon.country ;
    console.log(" salonaddress: " + salonaddress)
    var that = this;
    geocoder.geocode( { 'address': salonaddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          that.map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: this.map,
              title: salon.title,
              position: results[0].geometry.location
          });
          marker.info_window_content = salon.title + '<br/> Treatments: ' + salon.treatments + '<br/> Booking: ' + salon.bookings_1 + '<br/> Address: ' + salon.address + '<br/><a href="' + salon.   permalink + '"> View Full Details </a>'
            that.markers[salon.id] = marker

            google.maps.event.addListener(marker, 'click', function() {
              that.infowindow.setContent(marker.info_window_content)
              that.infowindow.open(that.map,marker);
            });

        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
    });

  },

看起來像在工作，但根本沒有在地圖上顯示標記。 試圖找到我的錯誤，但經過許多小時仍無法解決。 有人可以指出我的編碼錯誤嗎？

Answer 1

在下面的代碼中，我已將“ this”更改為“ that”，並且它解決了我的問題。 尚不確定邏輯。

之前：

var marker = new google.maps.Marker({
              map: this.map,
              title: salon.title,
              position: results[0].geometry.location
          });

后：

 var marker = new google.maps.Marker({
              map: that.map,
              title: salon.title,
              position: results[0].geometry.location
          });