Google地图折线问题 [英] Issue With Google map polyline
问题描述
我有一张Google地图，我需要在地图上的不同位置之间绘制链接.我正在使用谷歌地图折线来绘制不同点之间的链接.以下是代码:
I have a google map and I need to draw links between different locations on the map. I am using google maps polyline to draw links between different points. Following is the code:
// code to draw map
var map;
var mapProp = {
// center : new google.maps.LatLng(51.4848, -0.20325),
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
// data to show the links between locations, first part of lat & long denotes from location and second part is to location for a link.
var links_data = [
{"path":[{"lat":53.408123,"lng":-2.985655},{"lat":53.416366,"lng":-2.985655}]},
{"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.408123,"lng":-3.038971}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.390648,"lng":-3.014405}]},
{"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.409477,"lng":-2.982685}]},
{"path":[{"lat":53.407086,"lng":-2.989244},{"lat":53.390648,"lng":-3.014405}]},
{"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.407086,"lng":-2.989244}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.407086,"lng":-2.989244}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.409477,"lng":-2.982685}]},
{"path":[{"lat":53.389557,"lng":-2.989244},{"lat":53.388615,"lng":-3.015866}]},
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.409477,"lng":-2.982685}]},
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.407086,"lng":-2.989244}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.389557,"lng":-3.014986}]},
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.390648,"lng":-3.014405}]},
{"path":[{"lat":53.389557,"lng":-3.014405},{"lat":53.389557,"lng":-3.022483}]},
{"path":[{"lat":53.408123,"lng":-3.038971},{"lat":53.410152,"lng":-3.022483}]},
{"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.410152,"lng":-3.022483}]},
{"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.408123,"lng":-3.038971}]},
{"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.416366,"lng":-2.985655}]}
];
// draw links
for(var i = 0 ; i < links_data.length; i++)
{
var latLng = links_data[i].path;
// polylines lat long array
var polypoints = [];
for ( var j = 0; j < latLng .length; j++) {
polypoints[j] = new google.maps.LatLng(
parseFloat(latLng [j].lat),
parseFloat(latLng [j].lng));
}
var link = new google.maps.Polyline({
path : polypoints,
geodesic : true,
strokeColor : col,
strokeOpacity : 0.5,
strokeWeight : 3,
title : "test"
});
link.setMap(map);
}
我面临一个问题，地图有时显示不相关的线条(其中很少有黑色椭圆标记)，如下图所示:
I am facing a issue the maps sometimes shows irrelevant lines (few of them marked in black ellipse) as shown in the image below:
有什么问题吗?我正在从以下网址使用Goggle API https://maps.googleapis.com/maps/api/js?v = 3.exp ;
any idea whats the issue about?. I am using goggle api from the following url https://maps.googleapis.com/maps/api/js?v=3.exp;
推荐答案
您没有以正确的方式填充路径坐标，红色线是重复越来越多的时间的线，而50％不透明度线是重复的线仅绘制一次，这意味着重复相同的坐标.可能是您以错误的方式或错误的顺序在路径中加载了坐标.或者您正在尝试画更多的线，但由于错误，您画了一条或几条线是错误的.您提供的代码不足以进行正确的评估.可能也有必要评估标记的坐标.
You don't populate the path coordinates in the right way, the full red color lines are lines repeted more and more time and the 50% opacity lines are lines draw one time only, this mean same coordinate are repeted. Probably you are loading the coordinates in path in wrong way or in wrong sequence. Or You are trying to draw more lines but for mistake you draw one or few lines wrong. The code you are provide is not enough for a correct evaluation. probably is necessary evalute the coordinates of marker too.
我玩过您的代码，这是一个功能正常且自洽的代码页面我在编码e和声明时发现了一些小错误，因此我希望将其移到脚本顶部.本质上，问题在于点的坐标，在许多情况下，坐标以相反的顺序指向同一条线或从同一点开始且彼此之间非常接近.可能您需要清除双线(我已经签署了一些)并定义了要在地图上显示的更好的白色.我希望这对您有用
I have played with your code and this is a functioning and self-consistent code page I have found some minor mistake in coding eand some declaration i preferred move in top of the script. Essentially the problem are the coordinates of the points in many case the coordinates refer to the same line in reverse order or start for the same point and are very near each other. Probabily you need to clear the double lines (i have signed some) and define better whiat you want show in the map. I hope this is useful for you
<!DOCTYPE html>
<html>
<head>
<title>test sandbox 8</title>
<style type="text/css">
#main {
margin: 60px 15px;
}
#map {
min-height: 600px;
min-width: 800px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script>
// code to draw map
var map;
var col = '#FF0000';
var link ;
var latLng;
var polypoints;
function initialize() {
var mapProp = {
center : new google.maps.LatLng(53.40, -2.99),
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
// data to show the links between locations, first part of lat & long denotes from location and second part is to location for a link.
var links_data = [
{"path":[{"lat":53.408123,"lng":-2.985655},{"lat":53.416366,"lng":-2.985655}]},
{"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.408123,"lng":-3.038971}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.390648,"lng":-3.014405}]},
{"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.409477,"lng":-2.982685}]},
{"path":[{"lat":53.407086,"lng":-2.989244},{"lat":53.390648,"lng":-3.014405}]},
{"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.407086,"lng":-2.989244}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.407086,"lng":-2.989244}]},
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.409477,"lng":-2.982685}]},
{"path":[{"lat":53.389557,"lng":-2.989244},{"lat":53.388615,"lng":-3.015866}]}, // line 9 same origin of line 13
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.409477,"lng":-2.982685}]}, // line 10 same origin of line 13
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.407086,"lng":-2.989244}]}, // line 11
{"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.389557,"lng":-3.014986}]}, // line 12
{"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.390648,"lng":-3.014405}]}, // line 13
{"path":[{"lat":53.389557,"lng":-3.014405},{"lat":53.389557,"lng":-3.022483}]}, // line 14
{"path":[{"lat":53.408123,"lng":-3.038971},{"lat":53.410152,"lng":-3.022483}]}, // line 15 repeat line 17 in reverse order
{"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.410152,"lng":-3.022483}]}, // line 16 repeat line 18 in reverse order
{"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.408123,"lng":-3.038971}]}, // line 17
{"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.416366,"lng":-2.985655}]} // line 18
];
// draw links
for(var i = 0 ; i < links_data.length; i++)
{
latLng = links_data[i].path;
// polylines lat long array
polypoints = [];
for ( var j = 0; j < latLng.length; j++) {
polypoints[j] = new google.maps.LatLng(
parseFloat(latLng[j].lat),
parseFloat(latLng[j].lng));
}
link = new google.maps.Polyline({
path : polypoints,
geodesic : true,
strokeColor : col,
strokeOpacity : 0.5,
strokeWeight : 3,
title : "test"
});
link.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
这篇关于Google地图折线问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
