Question

我正在使用随机用户生成器来获取JSON数据： http://randomuser.me/

我每次点击一个按钮都会打电话，所以我得到的邮政编码我用谷歌地图API做一个地理编码器并获得经纬度。直到它工作得很好，但我不知道如何在谷歌地图上使用它。我正在尝试创建D3圈子，有两种方法可以做到这一点：

1.-使用Google Maps API中的绘图形状： https://developers.google.com/maps/documentation/javascript/shapes#circles

2.-使用Google Maps API中的自定义叠加层： https://developers.google.com/maps/documentation/javascript/customoverlays

我需要使用叠加层并使用D3绘制图形，如下例所示： http://bl.ocks.org/mbostock/899711

所以我怀疑是：

1.-如何使用D3来使用纬度和经度并加载它们？在示例中，他们从目录加载JSON，但在这里我使用的是远程数据。我应该考虑JSON解析或字符串还是其他任何一个？

2.-将此作为干净代码编写的正确方法是什么？为什么？

提前谢谢

的index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/d3.v3.js"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {        
        var mapOptions = {
          center: new google.maps.LatLng(16.4706001, -33.6728973),
          zoom:3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);    
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>

    <div id="map-canvas"></div>

    <div id="button">
      <button id="loadbutton">Click to Load</button>
    </div>

    <script type="text/javascript" src="js/script.js"></script>
  </body>
</html>

的script.js

var randomuserURL = 'http://api.randomuser.me/';

var myButton = document.getElementById('loadbutton');
myButton.onclick = loadAJAX;

var lat = '';
var lng = '';
var zipcode;
var geocoder = new google.maps.Geocoder();

function loadAJAX () {
    $.ajax({
      url: randomuserURL,
      dataType: 'json',
      success: function(data){
        zipcode = data.results[0].user.location.zip;
        latlng();
      }
    });
}

function latlng () {
    geocoder.geocode( { 'address': zipcode}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
             lat = results[0].geometry.location.lat();
             lng = results[0].geometry.location.lng();
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    console.log('Latitude: ' + lat + ' Logitude: ' + lng);
}

Answer 1

你基本上拥有你需要的一切。

无需加载“本地”文件 - d3.json将任意URL作为其第一个参数。您可能遇到的唯一问题是浏览器安全限制。在这种情况下，JSONP可能会有所帮助。
如果您的代码适合您，那应该没问题。老实说，你的代码很少，无所谓。

正确解析此JSON的方法并将其与D3一起使用

1 个答案: