gpt4 book ai didi

javascript - 带有 D3.geo.path 的谷歌地图

转载 作者:行者123 更新时间:2023-11-30 17:51:51 24 4
gpt4 key购买 nike

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

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

你知道这里出了什么问题吗?

最佳答案

相当古老的问题。但是刚刚开始使用相同的主题。以防万一其他人偶然发现了这一点。只需将其放入 polyline_context.js 文件中,即可看到它生效:

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

视频中展示的和需要实现的不一定同步。

关于javascript - 带有 D3.geo.path 的谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18854851/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com