X方向标记

我从来没有使用过Google maps API。X方向标记

对于我正在进行的学校项目;我需要两个位置之间的方向（这很容易，我想我可以做到这一点），

但是我也需要把一个X标记;在路上每10英里。

这甚至可能吗？

谢谢。

来源

2011-09-23 socialMatrix

你要使用为DirectionsService绘制实际的方向，或者只是在地图上绘制两点之间的折线？ – duncan

嗨Duncan我真的很确定...我可以使用任何一个能让我在每50英里处放上x标记的球员......哪一个会是？ – socialMatrix

如果您只是使用折线在两点之间绘制单条直线，会更容易。我认为这可能也可以用Directions来完成，只是不知道如何。 – duncan

好的，这里有一个工作解决方案，每200英里绘制一个标记（我正在进行大距离检查它是否在测地线曲线上工作）。为了使这项工作对你来说，只是改变所有的坐标，并改变200至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>

来源

2011-09-24 23:56:48 duncan

该死的，真棒。我肯定会的。非常感谢 – socialMatrix

回答

相关问题