一个全Javascript的谷歌地图商店查找器

试图让商店定位器仅在javascript中工作时遇到问题。我可以加载数据，但当我用英里半径搜索我的位置时，它会变得很奇怪，有什么想法吗？最初的想法是从一个网站，但显然它有错误，因为它没有加载我的位置。这是使用谷歌地图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>

var StoreFinder=（新函数（）{
//配置
var showAllLocationsOnStart=true；
//@私有变量
var userAddress，markers=[]，
图像处理http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0440/flag_red.png',
商店=[
{拉丁语：53.4577，液化天然气：-2.2735，姓名：'Old Tafford，Manchester'}，
{lat:51.4801，lng:-0.18991，名称：'Chelsea Football Club'}，
{lat:51.5551，lng:-0.1097，名称：'Arsenal Football Club'}，
{lat:53.4846，lng:-2.2027，名称：'Manchester City Football Club'}
];
/*初始化gmap***********************************************/
这张地图；
this.initialize=函数（）{
var usCenter=new google.maps.LatLng（52.5813，-1.4446），
myOptions={zoom:6，center:usCenter，mapTypeId:google.maps.mapTypeId.ROADMAP}；
StoreFinder.the_map=新的google.maps.map（document.getElementById（“map_canvas”），myOptions；
var storeCount=stores.length；
对于（i=0；i5）{StoreFinder.geoCode（location，miles）；}else{StoreFinder.showAllLocations（）；}
})
})
A.
在内部
25英里
50英里
100英里
200英里
500英里
查找（重置映射）

---

尝试使用

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

在您的

地理编码中：

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