带有D3.geo.path的Google地图 [英] Google Maps with D3.geo.path
本文介绍了带有D3.geo.path的Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图按照此视频中的示例进行操作： https://www.youtube.com/watch?v=wqPGFs0cqxI
这是关于使用D3.js绘制路径Google Maps API。控制台显示错误 Uncaught TypeError：Object＃< PolylineContext>has no method'setCurrent'。
index.html
< head>
< title>应用程式< / 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.jscharset =utf-8>< / script> ;
< script src =polyline_context.js>< / script>
< script type =text / javascript>
var map;
var折线;
函数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赤道;
var projection;
函数d3init（）{
width = map.getDiv（）。offsetWidth;
height = map.getDiv（）。offsetHeight;
投影= 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'，坐标：[[-180,20]，[-90,0]，[0，-20]，[90,0]，[180,20]]} ;
render（）; （
）
函数render（）{
polyline.setOptions（{
strokeColor：'red'，
strokeWeight：2
}） ;
context.setCurrent（polyline.getPath（））;
路径（赤道）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>
< / div>
< / body>
Polyline_context.js
'use strict';
函数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;
};
视频中显示的内容和需要实现的内容不一定是同步的。
I'm trying to follow the example in this videos:
https://www.youtube.com/watch?v=wqPGFs0cqxI
It's about drawing path with D3.js into Google Maps API. The console shows me the error Uncaught TypeError: Object#<PolylineContext>" has no method 'setCurrent'.
The 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>
The 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() {};
Any ideas of what's wrong in here?
解决方案
Fairly old question. But just getting started with the same topic. Just in case somebody else stumbles upon this. Just put this inside the polyline_context.js file and see it come to live:
PolylineContext.prototype.setCurrent = function (path) {
this.currentPath = path;
};
What was shown in the video and what needs to be implemented is not necessarily in sync.
这篇关于带有D3.geo.path的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
