如何使用谷歌地图到达附近的地方?

时间:2017-01-18 11:48:55

标签: javascript php jquery html5 css3

代码:

<script type="text/javascript">
    $(function(){
        $('.chkbox').click(function(){
            $(':checkbox').attr('checked',false);
            $('#'+$(this).attr('id')).attr('checked',true);
            search_types(map.getCenter());
        });

    });

    var map;
    var infowindow;
    var markersArray = [];
    var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
    var marker;
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();
    // var waypoints = [];                  
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: pyrmont,
            zoom: 14
        });
        infowindow = new google.maps.InfoWindow();
        //document.getElementById('directionsPanel').innerHTML='';
        search_types();
       }

    function createMarker(place,icon) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: icon,
            visible:true  

        });

        markersArray.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"+place.rating+"<br><b>Id:</b>"+place.id);
            infowindow.open(map, this);
        });

    }
    var source="";
    var dest='';

    function search_types(latLng){
        clearOverlays(); 

        if(!latLng){
            var latLng = pyrmont;
        }
        var type = $('.chkbox:checked').val();
        var icon = "images/"+type+".png";


        var request = {
            location: latLng,
            radius: 2000,
            types: [type] //e.g. school, restaurant,bank,bar,city_hall,gym,night_club,park,zoo
        };

        var service = new google.maps.places.PlacesService(map);
        service.search(request, function(results, status) {
            map.setZoom(14);
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    results[i].html_attributions='';
                    createMarker(results[i],icon);
                }
            }
        });

     }


    // Deletes all markers in the array by removing references to them
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setVisible(false)
            }
            //markersArray.length = 0;
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function clearMarkers(){
        $('#show_btn').show();
        $('#hide_btn').hide();
        clearOverlays()
    }
    function showMarkers(){
        $('#show_btn').hide();
        $('#hide_btn').show();
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setVisible(true)
            }

        }
    }

    function showMap(){

        var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
        var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(24, 32));
        var input_addr=$('#address').val();
        geocoder.geocode({address: input_addr}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                var latlng = new google.maps.LatLng(latitude, longitude);
                if (results[0]) {
                    map.setZoom(14);
                    map.setCenter(latlng);
                    marker = new google.maps.Marker({
                        position: latlng, 
                        map: map,
                        icon: markerImage,
                        draggable: true 

                    }); 
                    $('#btn').hide();
                    $('#latitude,#longitude').show();
                    $('#address').val(results[0].formatted_address);
                    $('#latitude').val(marker.getPosition().lat());
                    $('#longitude').val(marker.getPosition().lng());
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                    search_types(marker.getPosition());
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);

                    });


                    google.maps.event.addListener(marker, 'dragend', function() {

                        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                if (results[0]) {
                                    $('#btn').hide();
                                    $('#latitude,#longitude').show();
                                    $('#address').val(results[0].formatted_address);
                                    $('#latitude').val(marker.getPosition().lat());
                                    $('#longitude').val(marker.getPosition().lng());
                                }

                                infowindow.setContent(results[0].formatted_address);
                                var centralLatLng = marker.getPosition();
                                search_types(centralLatLng);
                                infowindow.open(map, marker);
                            }
                        });
                    });


                } else {
                    alert("No results found");
                }
            } else {
                alert("Geocoder failed due to: " + status);
            }
        });

    }   

</script>

<div style="width: 100%;">
              <h4 style="color:#000;text-align:center"><b>Nearby Places</b></h4>
            <table border="0" cellspacing="0" cellpadding="3" style="width: 100%;">

              <tr>
                <td>
                    <label for="school">
                        <input type="checkbox" name="mytype" class="chkbox" id="school"  value="school" />School
                    </label>
                </td>
                <td>
                    <label for="restaurant" >
                        <input type="checkbox" name="mytype" class="chkbox" id="restaurant"  value="restaurant"/>Restaurant
                    </label>
                </td>
                <td>
                    <label for="hospital" >
                        <input type="checkbox" name="mytype" class="chkbox"  id="hospital"  value="hospital"/>Hospital
                    </label>
                </td>
                <td>
                    <label for="bus_station" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="bus_station"  value="bus_station"/>Bus Stopedge
                    </label>
                </td>
               <td>
                <label for="spa" >
                    <input type="checkbox" name="mytype"  class="chkbox" id="spa"  value="spa"/>Spa
                </label>
                /td>
              </tr>
              <tr>
                <td>
                    <label for="bank" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="bank"  value="bank"/>Bank
                    </label>
                </td>
                <td>
                    <label for="bar" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="bar"  value="bar"/>Bar
                    </label>
                </td>
                <td>
                    <label for="movie_theater" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="movie_theater"  value="movie_theater"/>Movie Theater
                    </label>
                </td>
                <td>
                    <label for="gym" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="gym"  value="gym"/>Gym
                    </label>
                </td>
                <td>
                    <label for="atm" >
                        <input type="checkbox" name="mytype"  class="chkbox" id="atm"  value="atm"/>ATM
                    </label>
                </td>
              </tr>
            </table>
            </div>
            <br/>
            <input id="address" class="form-control border-radius-0 height-50" type="text" style="width:650px;" value="Chaudhary Charan Singh University,Meerut,Uttar Pradesh,India"/>
            <input type="button" value="submit" id="btn" onClick="showMap();" class="btn btn-success btn-block border-radius-0 height-50" style="width:20%; margin-left: 85%; width: 15%; margin-top: -40px;" />
            <br/>
            <div id="map"></div>
            <input type="text" id="latitude" style="display:none;" placeholder="Latitude"/>
            <input type="text" id="longitude" style="display:none;" placeholder="Longitude"/>
            <input type="button" id="show_btn" value="show  markers" onClick="showMarkers();" style="display:none;" />
            <div id="test"></div>

当我点击复选框时它的地方靠近地方,但它确实没有显示我想要的实际位置我想要Chaudhary Charan Singh大学,Meerut,Uttar Pradesh,印度当我点击提交按钮时它会给出错误消息,但当我给Meerut,Uttar Pradesh,印度它显示位置。那我怎么能得到地址与地址的位置。

1 个答案:

答案 0 :(得分:0)

这是因为地理编码无法找到您提供的地址。 您传递的地址参数在该数据库中不可用或无法创建映射。

您可以通过

进行检查

https://maps.googleapis.com/maps/api/geocode/json?address='University Main Rd, Chaudhary Charan Singh University, Ramgarhi, Meerut, Uttar Pradesh, India'

  • 这将导致

但是

https://maps.googleapis.com/maps/api/geocode/json?address='Chaudhary Charan Singh University, Ramgarhi, Meerut, Uttar Pradesh, India'

  • 这不是

所以我的建议是不要使用地址。请改用地理位置(纬度和经度)。

像:

http://maps.googleapis.com/maps/api/geocode/json?latlng=28.969098, 77.740517

允许用户在地图中选择一个位置或获取用户的当前位置,然后执行其余的代码。

请访问:https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

希望这会对你有所帮助