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

我在網站中使用filter.js以及Google Maps API V3，因爲它僅在its demo/example(of filter.js)中顯示，只有一個區別，我的要求是使用地址代替緯度或經度，並且據我所知可以使用Google的地理編碼服務地圖。我要修改我的一些代碼：如何在Filter.js中使用Google Maps JavaScript API v3的地理編碼服務？

以前

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

    },

它看起來像它的工作之後，但它沒有顯示在地圖上的所有標記。試圖找到我的錯誤，但幾個小時後仍然無法解決它。任何人都可以指出我的編碼錯誤嗎？

來源

2013-08-23 Imran

多少美容院都在嘗試在地圖上顯示？你得到任何JavaScript錯誤？ 'this.map'的價值是什麼？你得到什麼控制檯輸出？你能否提供一個顯示問題的jsfiddle（或指向一個活動地圖的鏈接）？ – geocodezip

沙龍的數量是動態的。沒有JavaScript錯誤。現場示例請轉到此網址（http://b-card.co.uk/search/）。您只需在搜索字段和位搜索按鈕中鍵入「London」即可。 – Imran

我在該頁面上看到2個標記（如果我縮小）。我在邊欄上看到4個參賽作品，但其中3個參賽作品在同一地點（238 High Street South Eastham，倫敦，E6 3PG）。 – geocodezip

我在下面的代碼中將「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 
      });

來源

2013-08-24 16:39:30 Imran

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

回答

相關問題