javascript - 如何将图钉添加到谷歌地图地理编码 API

Question

我正在尝试将这三件事合二为一。

• http://jsfiddle.net/Dansker/hk5fgbzr/3/ ( fiddle 1)
• http://jsfiddle.net/Dansker/rnrba8so/10/ ( fiddle 2)
• data.illinois.gov/resource/wsms-teqm.json(数据源)

我想像我在 fiddle 1 中所做的那样添加引脚，以及我在 fiddle 2 中的代码。但是我需要使用不同的数据源。我在 fiddle 1 中使用的方法是使用纬度和经度。但因为我无法使用新数据源做到这一点，所以我需要找到一种新方法。这就是为什么我试图将它添加到 fiddle 之一。那行得通吗？如果是这样我该怎么办？如果它不起作用，您建议使用谷歌地图 API 做什么？

$.getJSON(URL, function(data, textstatus) {

          $.each(data, function(i, entry) {

              var contentString = '<div id="content">'+
                  '<div id="siteNotice">'+
                  '</div>'+
                  '<h1 id="firstHeading" class="firstHeading">' + entry.name_ + " Library" + '</h1>'+ '<hr>' + 
                  '<div id="bodyContent">'+ 
                  '<p>' + entry.address + " " + entry.zip + '.<br>' + 
                  '<p>' + '<a href="'+entry.website.url+'">' + entry.website.url + '</a>' + '</p>'+
                  '<p>' + entry.hours_of_operation + '</p>'+
                  '</div>'+
                  '</div>';


              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });


              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(entry.location.latitude, 
                                                   entry.location.longitude),
                  map: map,
                  title: entry["dba_name"] + "\n" + entry["address"]
              });

              google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
              });

          });
    });

Answer 1

由于您有 2 个回调函数，因此正确的方法是首先完成第一个回调的工作，在本例中，下载 JSON 并解析它们，我还将存储所有条目到 entries 中，以便我们在添加标记时可以使用数据，这在第一个回调结束时调用。

关于 API 访问限制，遗憾的是，我认为您必须使用付费的谷歌地图地理编码 API，或其他服务，例如 openStreetmaps。

我还有一个jsfiddle设置，希望有所帮助。