1

我正在尝试按照此视频中的示例进行操作：

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() {};

关于这里有什么问题的任何想法？

4

2 回答 2

2

相当老的问题。但刚刚开始讨论相同的主题。以防万一其他人偶然发现这一点。只需将其放入polyline_context.js文件中，然后查看它是否生效：

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

视频中显示的内容和需要实施的内容不一定是同步的。

于 2014-07-14T12:48:30.357 回答
0

要设置路径，只需使用以下代码：

context.currentPath = polyline.getPath();
于 2014-01-12T16:52:59.167 回答