Question

我正在尝试使用Google表格中存储的邮政编码将图钉添加到Google地图。到目前为止，我已经能够使用JSON访问电子表格中的Postcodes：

$ curl -IS 'http://192.168.0.1/getdeviceinfo/info.bin'
HTTP/1.1 200 OK
Date: Wed, 02 Dec 2015 16:42:45 GMT
Server: nostradamus 1.9.5
Connection: close
Etag: Aug 28 2015, 07:57:20
Transfer-Encoding: chunked
HTTP/1.0 200 OK
Content-Type: text/html

我还可以使用邮政编码将引脚添加到Google地图。

示例：http://codepen.io/aljohnstone/pen/eJOyrP

我在将两者结合起来时遇到了麻烦。我希望Codepen中的$.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) { $.each(data.feed.entry, function(i, v) { var data = $('<div class="listing">').append('<h4 id="bandb">' + v.gsx$postcode.$t + '</h4>'); $('body').append(data); }); });变量从我的Google表格中获取邮政编码。

Answer 1

使用Google Maps Javascript API v3的工作示例：

＆＃13;

$(document).ready(function() {
  var geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 54,
      lng: -3
    },
    zoom: 5
  });
  var i;
  var postcodes = [];
  $.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
    $.each(data.feed.entry, function(i, v) {
      postcodes.push(v.gsx$postcode.$t);
    });
  }).done(function() {
    map.setCenter(new google.maps.LatLng(54.00, -3.00));
    map.setZoom(5);
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < postcodes.length; i++) {
      geocoder.geocode({
        'address': "" + postcodes[i]
      }, (function(i) {
        return function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map,
              title: postcodes[i]
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        }
      })(i));
    }
  });
});

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map_canvas"></div>

＆＃13;

Answer 2

试试这个

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script>
<div id="map_canvas" style="width: 600px; height: 350px"></div>

<script type="text/javascript">
$(document).ready(function()
{
var geocoder = new GClientGeocoder();
       var map = new GMap2(document.getElementById("map_canvas"));
       var i;
       var postcodes = [];
       $.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
         $.each(data.feed.entry, function(i, v) 
         {
           postcodes.push(v.gsx$postcode.$t);
         });
       }).done(function()
       {
           map.setCenter(new GLatLng(54.00, -3.00), 5);
           for (i = 0; i < postcodes.length; i++) {
             geocoder.getLatLng(postcodes[i] + ', UK', function(point) {
               if (point) {
                 map.addOverlay(new GMarker(point));
               }
             });
           }
       });
});
</script>

工作示例http://codepen.io/snm/pen/eJOVMY?editors=101

如何使用jQuery和JSON将引脚添加到谷歌地图

2 个答案: