如何将引脚添加到谷歌地图地理编码 api

Posted 2023-02-23

【中文标题】如何将引脚添加到谷歌地图地理编码 api

【英文标题】：How to add pins to the google maps geocode api

【发布时间】：2015-06-06 16:57:14

【问题描述】：

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

http://jsfiddle.net/Dansker/hk5fgbzr/3/（小提琴1） http://jsfiddle.net/Dansker/rnrba8so/10/（小提琴2） data.illinois.gov/resource/wsms-teqm.json（数据源）

我想像在小提琴 1 中一样添加引脚，两个我在小提琴 2 中的代码。但是我需要使用不同的数据源的数据。我让它在小提琴 1 中工作的方式是使用纬度和经度。但是因为我不能用新的数据源做到这一点，所以我需要找到一种新的方法。这就是为什么我试图将它添加到小提琴中。那会奏效吗？如果是这样，我该怎么做？如果它不起作用，你会建议使用 google maps 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);
              );

          );
    );

【问题讨论】：

地理编码器在达到查询限制之前只能工作约 10-20 个点。对于 212 个地址，它会非常慢。

【参考方案1】：

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

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

我也有一个jsfiddle 设置，希望对您有所帮助。