如何在 Filter.js 中使用 Google Maps JavaScript API v3 的地理编码服务？答案

【问题标题】：How to use Google Maps JavaScript API v3's Geocoding Service in Filter.js?如何在 Filter.js 中使用 Google Maps JavaScript API v3 的地理编码服务？
【发布时间】：2013-08-23 23:02:17
【问题描述】：

我在网站中使用filter.js 和 Google Maps API V3，因为它在its demo/example(of filter.js) 中显示只有一个区别，我的要求是使用地址而不是纬度或经度，据我所知可以做到使用谷歌地图的地理编码服务。我必须修改我的一些代码：

之前

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

  },

它看起来像它的工作，但它根本没有在地图上显示标记。试图找出我的错误，但几个小时后仍然无法修复它。谁能指出我的编码错误？

【问题讨论】：

您打算在地图上显示多少个沙龙？您是否收到任何 javascript 错误？ this.map 的值是多少？你得到什么控制台输出？您能否提供一个显示问题的 jsfiddle（或指向显示问题的实时地图的链接）？
沙龙的数量是动态的。没有 javascript 错误。请转到此 URL (b-card.co.uk/search) 获取实时示例。您只需要在搜索字段和位搜索按钮中输入“伦敦”。
我在该页面上看到 2 个标记（如果我缩小）。我在侧栏上看到 4 个条目，但其中 3 个在同一个地方（238 High Street South Eastham, London, , E6 3PG）。
是的，因为我在代码中将“this”更改为“that”，这就是您看到它正确的原因。

标签： javascript jquery google-maps google-maps-api-3 google-geocoder

【解决方案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
          });

【讨论】：