Question

我正在尝试关注此视频中的示例：

https://www.youtube.com/watch?v=wqPGFs0cqxI

这是关于使用D3.js将路径绘制到Google Maps API中。控制台显示错误Uncaught TypeError: Object#<PolylineContext>" has no method 'setCurrent'。

index.html

<head>
  <title>App</title>
  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100%; }
    </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    <script src="polyline_context.js"></script>
    <script type="text/javascript">
    var map;
    var polyline;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(53.567, 9.944),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        polyline = new google.maps.Polyline({
          map: map
        });

        d3init();
      }
      var context;
      var width;
      var height;
      var path;
      var graticule;
      var equator;
      var projection;

      function d3init() {
        width = map.getDiv().offsetWidth;
        height = map.getDiv().offsetHeight;

        projection = d3.geo.equirectangular()
          .translate([0, 0])
          .scale(52.29578)
          .precision(2)

        context = new PolylineContext();
        path = d3.geo.path().projection(projection).context(context);
        equator = {type: 'LineString', coordinates: [[-180, 20], [-90, 0], [0, -20], [90, 0], [180, 20]]};

        render();
      }

      function render() {
        polyline.setOptions({
          strokeColor: 'red',
          strokeWeight: 2
        });
        context.setCurrent(polyline.getPath());

        path(equator);
      }

      google.maps.event.addDomListener(window, 'load', initialize);


    </script>
</head>

<body>

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

Polyline_context.js

'use strict';
function PolylineContext () {
    this.currentPath = null;
    this.currentIndex = 0;
}

PolylineContext.prototype.beginPath = function() {};

PolylineContext.prototype.moveTo = function(x, y) {
    if (this.currentPath) {
        var latLng = new google.maps.LatLng(y, x);
        this.currentPath.setAt(this.currentIndex, latLng);
        this.currentIndex++;
    }
};

PolylineContext.prototype.lineTo = function(x, y) {
    if (this.currentPath) {
        var latLng = new google.maps.LatLng(y, x);
        this.currentPath.setAt(this.currentIndex, latLng);
        this.currentIndex++;
    }
};

PolylineContext.prototype.arc = function(x, y, radius, startAngle, endAngle) {};

PolylineContext.prototype.closePath = function() {};

这里有什么错误的想法？

Answer 1

相当陈旧的问题。但只是开始使用相同的主题。以防其他人偶然发现这件事。只需将其放在polyline_context.js文件中，看看它是否存在：

PolylineContext.prototype.setCurrent = function (path) {
    this.currentPath = path;
};

视频中显示的内容以及需要实施的内容未必同步。

Answer 2

要设置路径，请改为使用此代码：

context.currentPath = polyline.getPath();

带有D3.geo.path的Google地图

2 个答案: