An All Javascript Google Maps Store Finder

Question

尝试让商店定位器只能在JavaScript中工作时遇到问题。我可以获取要加载的数据，但是当我搜索具有英里半径设置的位置时，它会变得很奇怪，有什么想法？最初的想法是从网站Click here，但显然它有错误，因为它不会加载我的位置。这是使用谷歌地图v3。任何帮助，将不胜感激

var StoreFinder = (new function(){   

     // config 
     var showAllLocationsOnStart = true; 

     // @PRIVATE variables 
     var userAddress, markers = [], 
      image = 'http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0440/flag_red.png', 
      stores = [ 
         {lat:53.4577, lng:-2.2735, name:'Old Tafford, Manchester'}, 
         {lat:51.4801, lng:-0.18991, name:'Chelsea Football Club'}, 
         {lat:51.5551, lng:-0.1097, name:'Arsenal Football Club'}, 
         {lat:53.4846, lng:-2.2027, name:'Manchester City Football Club'} 
        ]; 


     /* Initialize GMaps ***********************************************/ 
     this.the_map; 
     this.initialize = function(){ 
      var usCenter = new google.maps.LatLng(52.5813, -1.4446), 
       myOptions = {zoom:6,center: usCenter,mapTypeId:google.maps.MapTypeId.ROADMAP}; 

      StoreFinder.the_map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

      var storeCount = stores.length; 
      for(i=0; i < storeCount; i++){ 
       var marker = new google.maps.Marker({position: new google.maps.LatLng(stores[i].lat,stores[i].lng),title:stores[i].name,icon: image}) 
       markers.push(marker) 
       if(showAllLocationsOnStart){ marker.setMap(StoreFinder.the_map); } 
      } 
     } 
     /* End Initialize *************************************************/ 


     // @PRIVATE 
     function haversineDistance(p1, p2) { 
      function rad(x) {return x*Math.PI/180;} 
      var R = 3958.75587; 
      var dLat = rad((p2.lat-p1.lat)); 
      var dLon = rad((p2.lng-p1.lng)); 
      var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
        Math.cos(rad(p1.lat)) * Math.cos(rad(p2.lat)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2); 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c; 
      return d; 
     } 

     // @PRIVATE get distance between two markers (GMARKER OBJECTS) 
     function getDist(marker1,marker2){ 
      var p1 = { lat:marker1.position.za, lng:marker1.position.Ba }, 
       p2 = { lat:marker2.position.za, lng:marker2.position.Ba }; 
      return haversineDistance(p1, p2); 
     } 

     // @PUBLIC clear all markers, then display all store locations 
     this.showAllLocations = function(){ 
      var storeCount = markers.length; 
      for(i=0; i < storeCount; i++){ 
       markers[i].setMap(null); 
       markers[i].setMap(StoreFinder.the_map); 
      } 
      var usCenter = new google.maps.LatLng(52.5813, -1.4446); 
      StoreFinder.the_map.setCenter(usCenter); 
      StoreFinder.the_map.setZoom(4); 
     } 

     // @PUBLIC - geocode person's address (from form inputs), calculate distance to stores, 
     //   then display those within X miles 
     this.geoCode = function(userLocation,miles){ 
      var geocoder = new google.maps.Geocoder(); 
      var _stores = markers; //@IMPORTANT: markers is the array of instantiated Gmarker objects (don't use the STORES variable) 
      geocoder.geocode({'address':userLocation},function(results,status){ 
       if(userAddress === null || userAddress === undefined){ 
        userAddress = new google.maps.Marker({ 
         map:StoreFinder.the_map, 
         position:results[0].geometry.location 
        }) 
       }else{ 
        userAddress.setMap(null); 
        userAddress = new google.maps.Marker({ 
         map:StoreFinder.the_map, 
         position:results[0].geometry.location 
        }) 
       } 

       StoreFinder.the_map.setCenter(new google.maps.LatLng(userAddress.position.za, userAddress.position.Ba)); 
       StoreFinder.the_map.setZoom(5); 

       var storeCount = _stores.length, 
        results = 0; 
       for(i=0; i < storeCount; i++){ 
        _stores[i].setMap(null); 
        if(getDist(_stores[i],userAddress) < miles){ 
         _stores[i].setMap(StoreFinder.the_map); 
         results++; 
        } 
       } 

       var str = results+' store(s) found within '+miles+' miles of your location' 
       $('#results').empty().append(str); 
      }) 
     } 

    }) 

    $(document).ready(function(){ 
     $('#send').click(function(){ 
      var location = $('#address').val(), 
       miles = $('#sl-miles').val(); 
      if(location.length > 5){ StoreFinder.geoCode(location,miles); }else{ StoreFinder.showAllLocations(); } 
     }) 
    }) 



</script> 
</head> 
<body onload="StoreFinder.initialize()" style="padding:10px;"> 

<div id="store_locator_sorting"> 
    <label for="address"><span>A</span> 
     <input id="address" name="address" /> 
    </label> 

    <label for="sl-miles"><span>Within</span> 
     <select id="sl-miles" name="sl-miles"> 
      <option value="25">25 Miles</option> 
      <option value="50">50 Miles</option> 
      <option value="100">100 Miles</option> 
      <option value="200">200 Miles</option> 
      <option value="500">500 Miles</option> 
     </select> 
    </label> 

    <button id="send" type="button" >Find</button> <span style="font-size:11px;text-transform:uppercase;cursor:pointer;">(<a onclick="StoreFinder.showAllLocations();">Reset Map</a>)</span> 
</div> 

<div id="map_canvas" style="float:left;width:750px;height:530px;border:5px solid #ddd;"></div> 

<div id="results" style="float:left;"></div> 

Answer 1

尝试使用position.lat()和position.lng()方法而不是position.za和position.Ba。

所以你getDist功能是：

 // @PRIVATE get distance between two markers (GMARKER OBJECTS) 
    function getDist(marker1,marker2){ 
     var p1 = { lat:marker1.position.lat(), lng:marker1.position.lng() }, 
      p2 = { lat:marker2.position.lat(), lng:marker2.position.lng() }; 
     return haversineDistance(p1, p2); 
    } 

而在你geoCode：

StoreFinder.the_map.setCenter(new google.maps.LatLng(userAddress.position.lat(), userAddress.position.lng()));