从反向地理编码中提取城市

时间:2013-10-03 07:47:39

标签: javascript jquery json google-maps geocoding

我正在努力从纬度和经度中找到城市名称。

我正在从flickr的json回调中解析纬度和经度。 现在,我试图反转地理编码纬度和经度,以确定图片是否在洛杉矶。我试图计算洛杉矶的照片以及洛杉矶不在的照片。

当我将代码加载到浏览器中时,没有任何反应。我没有从萤火虫中得到任何错误。我在一个单独的html文件中测试了json解析的纬度和经度,所以我知道那个部分正在工作。我能够显示每张图片的纬度和经度。我正在努力的是反向地理编码。

谢谢你的帮助! :)

<!DOCTYPE html>
<html>
<head>
<title>Flickr Pie Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<meta charset="utf-8">
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3eu10Q0JajjUWTEQd_ENYDT64u3ZM7KA&sensor=false">
</script>
<script type="text/javascript">
var latitude;
var longitude;
var geocoder;
var city;
var cityName = "Los Angeles";
var inLosAngeles;
var notLosAngeles;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
var latlng;
var inside = 0;
var outside = 0;
$(document).ready(function() {
    function extractFromAdress(components, type) {
        for (var i = 0; i < components.length; i++)
        for (var j = 0; j < components[i].types.length; j++)
        if (components[i].types[j] == type) return components[i].long_name;
        return "";
    }
    var url = 'http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=14bfe578621f2dfe5c58086de5c79ab9&tags=losangeles&has_geo=1&extras=geo,tags&format=json&nojsoncallback=1';
    $.getJSON(url, function(data) {
        //loop through the results with the following function
        $.each(data.photos.photo, function(i, item) {
            latitude = item.latitude;
            longitude = item.longitude;
            geocoder = new google.maps.Geocoder();
            latlng = new google.maps.LatLng(latitude, longitude);

            function codeLatLng() {
                var input = document.getElementById('latlng').value;
                var latlngStr = input.split(',', 2);
                var lat = parseFloat(latlngStr[0]);
                var lng = parseFloat(latlngStr[1]);
                var latlng = new google.maps.LatLng(lat, lng);
                geocoder.geocode({
                    'latLng': latlng
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                    if(results[0]){

                        var town = extractFromAdress(results[0].address_components, "locality");
                        if (town == cityName) {
                            inside += 1;
                        } else {
                            outside += 1;
                        }
                    }
                    }
                });
            }
        });
        inLosAngeles = inside;
        notLosAngeles = outside;
        $('#results').append('inLosAngeles' + inLosAngeles + '' + 'notLosAngeles' + notLosAngeles);
    });
});
</script>
</head>

<body>

<div id = "results"></div>
</body>

</html>

2 个答案:

答案 0 :(得分:1)

<!DOCTYPE html>
<html>
<head>
<title>Flickr Pie Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<meta charset="utf-8">
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3eu10Q0JajjUWTEQd_ENYDT64u3ZM7KA&sensor=false">
</script>
<script type="text/javascript">
var latitude;
var longitude;
var geocoder;
var city;
var cityName = "Los Angeles";
var inLosAngeles;
var notLosAngeles;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
var latlng;
var inside = 0;
var outside = 0;
$(document).ready(function() {
    function extractFromAdress(components, type,type1) {
        for (var i = 0; i < components.length; i++)
        for (var j = 0; j < components[i].types.length; j++)
        if ((components[i].types[j] == type) || (components[i].types[j] == type1)) return components[i].long_name;
        return "";
    }
    var url = 'http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=14bfe578621f2dfe5c58086de5c79ab9&tags=losangeles&has_geo=1&extras=geo,tags&format=json&nojsoncallback=1';
    $.getJSON(url, function(data) {
        //loop through the results with the following function
        $.each(data.photos.photo, function(i, item) {
            latitude = item.latitude;
            longitude = item.longitude;
            geocoder = new google.maps.Geocoder();
            latlng = new google.maps.LatLng(latitude, longitude);

            function codeLatLng() {
                var input = document.getElementById('latlng').value;
                var latlngStr = input.split(',', 2);
                var lat = parseFloat(latlngStr[0]);
                var lng = parseFloat(latlngStr[1]);
                var latlng = new google.maps.LatLng(lat, lng);
                geocoder.geocode({
                    'latLng': latlng
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                    if(results[0]){

                        var town = extractFromAdress(results[0].address_components, "locality","administrative_area_level_2");
                        if (town == cityName) {
                            inside += 1;
                        } else {
                            outside += 1;
                        }
                    }
                    }
                });
            }
        });
        inLosAngeles = inside;
        notLosAngeles = outside;
        $('#results').append('inLosAngeles' + inLosAngeles + '' + 'notLosAngeles' + notLosAngeles);
    });
});
</script>
</head>

<body>

<div id = "results"></div>
</body>

</html>

答案 1 :(得分:0)

    <!DOCTYPE html>
<html>
<head>
<title>Flickr Pie Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<meta charset="utf-8">
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3eu10Q0JajjUWTEQd_ENYDT64u3ZM7KA&sensor=false">
</script>
<script type="text/javascript">
var latitude;
var longitude;
var geocoder;
var city;
var cityName = "Los Angeles";
var inLosAngeles;
var notLosAngeles;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
var latlng;
$(document).ready(function() {
    function extractFromAdress(components, type) {
        for (var i = 0; i < components.length; i++)
        for (var j = 0; j < components[i].types.length; j++)
        if (components[i].types[j] == type) return components[i].long_name;
        return "";
    }
    var url = 'http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=14bfe578621f2dfe5c58086de5c79ab9&tags=losangeles&has_geo=1&extras=geo,tags&format=json&nojsoncallback=1';
    $.getJSON(url, function(data) {
        //loop through the results with the following function
        $.each(data.photos.photo, function(i, item) {
            latitude = item.latitude;
            longitude = item.longitude;
            geocoder = new google.maps.Geocoder();
            latlng = new google.maps.LatLng(latitude, longitude);

            geocoder.geocode({
                'latLng': latlng
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if(results[0]){
                        var town = extractFromAdress(results[0].address_components, "locality");
                        if (town == cityName) {
                            $('#results').append(item.title + ' <strong>IS</strong> in Los Angeles</br>');
                        } else {
                            $('#results').append(item.title + ' <strong>ISN\'T</strong> in Los Angeles</br>');
                        }
                    }
                } else {
                    $('#results').append('Error: <strong>' + status + '</strong>, photo: "' + item.title + '"</br>');
                }
            });
        });
    });
});
</script>
</head>

<body>

<div id = "results"></div>
</body>

</html>