检索城市 Google Map API 的位置

Question

我想用谷歌地图检索世界上每个城市的经纬度。 我用a Google Fusion table:

function requestCities()
{
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    //var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS FROM ' + '1jmboG7oPaWTAUKubEl__YMVvkIkmhKTxxfD3wNo' + " WHERE 'CNTRY_NAME' = '"+ focusedCountry +"'";
    var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS, FIPS_CNTRY, GMI_ADMIN FROM ' + '1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU' + " WHERE 'POP_RANK' \< 5";
    //var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS FROM ' + '1jmboG7oPaWTAUKubEl__YMVvkIkmhKTxxfD3wNo';

    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=setCities');
    url.push('&key=AIzaSyACrx-nlt1KZ8cDNpsvW_FW8JPEKfbpF8g');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
}

在我的回调函数中，我 try to add a marker on each city:

function setCities(data)
{
    var rows = data['rows'];
    console.log(rows[0]);

    var nbInfobox = document.getElementById("infobox-wrapper").getElementsByTagName("div").length;

    for (var i in rows)
    {
        var name = rows[i][0];
        var pop_rank = rows[i][2];
        var status = rows[i][3];
        //var countryCode = rows[i][4];
        var cityCode = rows[i][5];
        var countryCode = cityCode.substring(0,2);
        var capital = eval(status[0] == "N");

        var myLatlng = new google.maps.LatLng(rows[i][1]['geometry']['coordinates'][1], rows[i][1]['geometry']['coordinates'][0]);

        var image = 'img/marker_'+ pop_rank+ '.png';
        if (capital)
        {
            var image = 'img/marker_capital.png';
            pop_rank = 0;
        }

        var marker = new google.maps.Marker(
            {
                position: myLatlng,
                title: name,
                zIndex: 7 - pop_rank,
                icon: image
            });


        //Create infobox for selected cities
        $("#infobox-wrapper").append("<div id=\"infobox" + nbInfobox + "\" class=\"infoboxcountry\" />");

        var info = new InfoBox({
            content: document.getElementById("infobox" + nbInfobox),
            position: marker.getPosition(),
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(0, 0),
            zIndex: 0,
            closeBoxURL: ""
        });

        $("#infobox" + nbInfobox).html(marker.getTitle());

        var city = new City(i, marker, info, pop_rank, countryCode, cityCode);

        overlays.cities.push(city);

        google.maps.event.addListener(marker, 'click', function() {
            cityClick(this);
        });

        ++nbInfobox;
    }

}

我的查询结果是一个包含世界上所有城市的数组，如下所示：

 ["Lima", "<Point><coordinates>", "1", "National and provincial capital", "PE", "PER-LIM"]

但我总是得到这个错误：

 Uncaught TypeError: Cannot read property 'coordinates' of undefined 

我不知道如何从我的数组 var 行中获取坐标。如果有人知道，谢谢你的帮助。

Answer 1

您的数据源有问题。查看您的脚本，您正在执行select ... from 1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU。所以我搜索并找到了融合表，Copy of World Cities.csv。查看信息，我发现它是从this table (1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30) 复制的。我做了一个 JSFiddle 并在回调函数中放了一个调试器。当脚本从您的问题中的表中选择时，geometry 属性未定义，因为rows[i][1] 不是 JSON，而是无论城市是什么，总是格式错误的 XML "<Point><coordinates>"。但是，如果您将脚本切换为从1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30（原始融合表，而不是您正在使用的副本）中选择，则以下代码可以很好地为您提供坐标：rows[i][1]['geometry']['coordinates'][1]。因此，在requestCities 中，使用以下查询而不是您所拥有的：

var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS, FIPS_CNTRY, GMI_ADMIN FROM ' + '1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30' + " WHERE 'POP_RANK' \< 5";

Answer 2

此表中的数据似乎有问题。

当我查看https://www.google.com/fusiontables/DataSource?docid=1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU&pli=1#map:id=3 时，地图上没有任何标记，不知为何geometry 未被正确识别。

例如特定行应如下所示：

["Lima",{"geometry":{"type":"Point","coordinates":[-77.0450036007242,-12.0819959357647]}},"1","National and provincial capital","PE","PER-LIM"]

如您所见，第二列与您的回复 <Point><coordinates> 不同

我无法告诉你为什么会发生这种情况，可能是因为在几何 KML 中用于高度的 NaN：

<Point><coordinates>-77.0450036007242,-12.0819959357647,NaN</coordinates></Point>

但是，为了进行测试，我制作了表格的副本，并且神奇地副本似乎可以正常工作：

https://www.google.com/fusiontables/data?docid=1re5M5ZjS7oUTux3ng538gQZMP3ralKTxPtfZJplB#map:id=3

所以你可以尝试同样的方法...创建一个表的副本（不要使用我的副本，我会在某天删除该表）