Question

我尝试使用谷歌地图和d3，但是，虽然控制台日志似乎表明一切正确，但实际地图不会显示（也是标记）。我甚至试图删除标记叠加层，但地图也不会显示。

var cx; var cy;
var width  = 1000;
var height = 800;

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map") .node(), {
zoom: 111, // was 11
center: new google.maps.LatLng(43.7, -79.4),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
); // end new map

var circles;
var imageAttributes = {height:32, width:32, x:-16, y:-16};

d3.json("/mydrupal/sites/default/d3_files/json/members google.json?nocache=" + (new Date()).getTime(),function(error,data) 
{
var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes()
    .overlayLayer)
    .append("div")
    .attr("class", "members"); // end var layer
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function() {
  var projection = this.getProjection(),
      padding = 10; // end var projection
  var marker = layer.selectAll("svg")
      .data(d3.entries(data))
      .each(transform) // update existing markers
    .enter()
      .append("svg:svg")
      .each(transform)
      .attr("class", "marker"); // end var marker
  // Add a circle.
  marker.append("svg:circle")
      .attr("r", 4.5)
      .attr("cx", padding)
      .attr("cy", padding); // end marker append circle
  // Add a label.
  marker.append("svg:text")
      .attr("x", padding + 7)
      .attr("y", padding)
      .attr("dy", ".31em")
      .text(function(d) { 
            return d.key; 
           }); // end text and marker append

  function transform(d) {
    d = new google.maps.LatLng(d.value[0], d.value[1]);
    d = projection.fromLatLngToDivPixel(d);
    return d3.select(this)
        .style("left", (d.x - padding) + "px")
        .style("top", (d.y - padding) + "px");
   } // end transform 
}; // end overlay draw
}; // end overlay add function

// Bind our overlay to the map…
overlay.setMap(map); 
}); //  end members json

我在http://jsfiddle.net/PatriciaW/seut5/

创建了一个jsfiddle

有没有明显的东西我忽略了（我猜是这样。）

Answer 1

我更新了geocode zip jsfiddle，你没有包含d3js或谷歌地图api，你也没有包含地图标签。

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

这是链接

http://jsfiddle.net/seut5/2/

Google地图无法显示

1 个答案: