使用JSON与谷歌地图API [英] Using JSON with Google Maps API

问题描述

我是新来使用API​​，这就是我试图完成，但我真的对如何去做不知道。我有一个 OpenCaching 开发商键，我可以访问像网址：

<$p$p><$c$c>test.opencaching.com/api/geocache?center=38.642,-94.754&limit=2&Authorization=DevKey

这将返回在最近2从藏宝坐标信息 38.642，-94.754 。该URL返回沿...

东西线

  [{名：约翰·布朗山，位置：{纬度：38.55345，LON： -  94.91825}}，{名：恩索尔农场，位置：{纬度：38.7956167，LON： -  94.8052667}}]
 

我试图用这个数据使用谷歌地图API它映射，但是我不知道我将如何将数据保存到JavaScript对象。如果我硬codeD在我的数据知道如何使用它，但我不知道该如何动态地从这个网址得到它。

解决方案

的一种方法是使用jQuery，做这样的事情：

  $。的getJSON（the_url_to_data功能（数据）{
    变种地图= new.google.maps.Map（的document.getElementById（my_map），{
    ...图参数...
    };    VAR缓存= data.list.Caches //根据您的JSON是如何实际返回。    $。每个（缓存功能（我，缓存）{
        变量名称= cache.name; //
        VAR POSI =新google.maps.LatLng（cache.lat，cache.lon）;
        ...等等...
    }
};
 

$。的getJSON 返回一个JSON对象，然后匿名函数将其作为一个参数。

的例子 VAR缓存= data.list.Caches 基于具有嵌套JSON。

有从Adobe实际上这里有一个例子很好的页面。

的http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example4

因此​​，使用您的示例数据。你可以看到，地利实际上是另一个嵌套的JSON对象。你会通过 data.location 访问它。它只是更容易，如果你循环遍历了你的对象，并把它们在列表中。然后访问使用相同的路径点格式那些更小的物体。例如遍历你的榜样code把所有的 data.location 对象到一个名为 COORDS 变量（例如）然后访问拉特和放大器; LONS通过 coords.lat ＆安培; coords.lon 。

  [{名：约翰·布朗山，位置：{纬度：38.55345，LON： -  94.91825}}，{名：恩索尔农场，位置：{纬度：38.7956167，LON： -  94.8052667}}]
 

I'm new to using APIs and this is what I am trying to accomplish, but I really have no idea on how to go about it. I have an OpenCaching developer key and I can access a URL like:

test.opencaching.com/api/geocache?center=38.642,-94.754&limit=2&Authorization=DevKey

which would return information on the 2 closest geocaches from coordinates 38.642, -94.754. The URL returns something along the lines of...

[{"name":"John Brown Hill","location":{"lat":38.55345,"lon":-94.91825}},{"name":"Ensor Farm","location":{"lat":38.7956167,"lon":-94.8052667}}]

I am trying to use this data to map it using Google Maps API, but I don't understand how I would save the data to a JavaScript object. If I hard coded the data in I know how to use it, but I don't know how to dynamically get it from this URL.

解决方案

One way would be to use jQuery and do something like this:

$.getJSON("the_url_to_data", function(data) {
    var map = new.google.maps.Map(document.getElementById("my_map"),{
    ...map params...
    };

    var cache = data.list.Caches // depending on how your JSON is actually returned.

    $.each(cache, function(i, cache) {
        var name = cache.name; // 
        var posi = new google.maps.LatLng(cache.lat, cache.lon);
        ...etc...
    }
};

$.getJSON returns a a JSON object and then the anonymous function takes it as a parameter.

The example of var cache = data.list.Caches is based on having nested JSON.

There's a good page of examples here from Adobe actually.

http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example4

So using your example data. You can see that "location" is actually another nested JSON object. You'd access it by data.location. It just makes it easier to iterate over if you loop over your object and put them in a list. Then access those smaller objects using the same path 'dot' format. e.g. loop over your example code putting all the data.location objects into a variable called coords (for example) and then access the lats & lons by coords.lat & coords.lon.

[{"name":"John Brown Hill","location":{"lat":38.55345,"lon":-94.91825}},{"name":"Ensor Farm","location":{"lat":38.7956167,"lon":-94.8052667}}]

这篇关于使用JSON与谷歌地图API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！