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

全部Javascript Google地图商店查找器

1 个答案: