X沿着方向标记 [英] X marks along the direction
本文介绍了X沿着方向标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从未使用过Google地图API。
我正在为这个学校项目工作;我需要在两个地点之间找到一个方向（这很容易，我认为我可以做到这一点），
但是我也需要放一个X标记;在路上每10英里。
这甚至有可能吗？
谢谢。
< html>
< head>
< title>标记每x英里< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
#map_canvas {height：100％}
< / style>
<！---需要加载用于计算距离的几何库，请参阅http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api -3 / --->
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false>< / script>
< script type =text / javascript>
函数initialize（）{
var startLatlng = new google.maps.LatLng（54.42838，-2.9623）;
var endLatLng = new google.maps.LatLng（52.908902,49.716793）;
var myOptions = {
zoom：4，
center：new google.maps.LatLng（51.399206,18.457031），
mapTypeId：google.maps.MapTypeId。 ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var startMarker = new google.maps.Marker（{
position：startLatlng，
map：map
}）;
$ b $ var endMarker = new google.maps.Marker（{
position：endLatLng，
map：map
}）;
//在点之间画一条线
var line = new google.maps.Polyline（{
path：[startLatlng，endLatLng]，
strokeColor： ## FF0000，
strokeOpacity：0.5，
strokeWeight：4，
geodesic：true，
map：map
}）;
//这两个标记之间的距离是多少？
var distance = google.maps.geometry.spherical.computeDistanceBetween（
startLatlng，
endLatLng
）;
// 200英里以米为单位
var markerDistance = 200 * 1609.344;
var drawMarkers = true;
var newLatLng = startLatlng;
//一旦超出终点，就停止
while（drawMarkers == true）{
//它们之间的标题是什么？
var heading = google.maps.geometry.spherical.computeHeading（
newLatLng，
endLatLng
）;
//沿着这个标题从起始点开始X英里获得latlng
var newLatLng = google.maps.geometry.spherical.computeOffset（
newLatLng，
markerDistance ，
标题
）;
//绘制标记
var newMarker = new google.maps.Marker（{
position：newLatLng，
map：map
}）;
//计算新标记与结束标记之间的距离
var newDistance = google.maps.geometry.spherical.computeDistanceBetween（
newLatLng，
endLatLng
）;
if（newDistance< = markerDistance）{
drawMarkers = false;
}
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
< / html>
I have never worked with Google maps API.
For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),
However I also need to put an X mark; at every 10 miles along the way.
Is this even possible?
Thank You.
解决方案
Ok, here's a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 10
<!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
var endLatLng = new google.maps.LatLng(52.908902,49.716793);
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(51.399206,18.457031),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var startMarker = new google.maps.Marker({
position: startLatlng,
map: map
});
var endMarker = new google.maps.Marker({
position: endLatLng,
map: map
});
// draw a line between the points
var line = new google.maps.Polyline({
path: [startLatlng, endLatLng],
strokeColor: "##FF0000",
strokeOpacity: 0.5,
strokeWeight: 4,
geodesic: true,
map: map
});
// what's the distance between these two markers?
var distance = google.maps.geometry.spherical.computeDistanceBetween(
startLatlng,
endLatLng
);
// 200 miles in meters
var markerDistance = 200 * 1609.344;
var drawMarkers = true;
var newLatLng = startLatlng;
// stop as soon as we've gone beyond the end point
while (drawMarkers == true) {
// what's the 'heading' between them?
var heading = google.maps.geometry.spherical.computeHeading(
newLatLng,
endLatLng
);
// get the latlng X miles from the starting point along this heading
var newLatLng = google.maps.geometry.spherical.computeOffset(
newLatLng,
markerDistance,
heading
);
// draw a marker
var newMarker = new google.maps.Marker({
position: newLatLng,
map: map
});
// calculate the distance between our new marker and the end marker
var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
newLatLng,
endLatLng
);
if (newDistance <= markerDistance) {
drawMarkers = false;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
这篇关于X沿着方向标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
