Question

这是我的基于纬度和数量的点之间的地图。经度。 enter image description here

如果您仔细观察线路和铁路，铁路不是直线，而是我在图钉之间划线是直的。但我需要我的画线应该在铁路上。我不确定它是否可能。如果可能请咨询。这是我的HTML代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Crossing Map</title>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
 var map = null;
 var pinLayer = new Microsoft.Maps.EntityCollection();
 var infoboxLayer = new Microsoft.Maps.EntityCollection();

 function GetMap() {
    // Initialize the map
    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
            credentials:"API Key"               
          }); 

    // Create the info box for the pushpin
    pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
    infoboxLayer.push(pinInfobox);

    //created variables(one variable per location)
    var loc1 = new Microsoft.Maps.Location(29.775560, -95.348878);
      // Add a pin to the map
      var pin1 = new Microsoft.Maps.Pushpin(loc1); 
      pin1.Title = "Brooks St";
      pin1.Description = "First PIn Descriptoin is here.";
      pinLayer.push(pin1); //add pushpin to pinLayer
      Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
      var loc2 = new Microsoft.Maps.Location(29.776584, -95.348878);

      // Add a pin to the map
      var pin2 = new Microsoft.Maps.Pushpin(loc2); 
      pin2.Title = "Harrington St";
      pin2.Description = "Second pin description";
      pinLayer.push(pin2); //add pushpin to pinLayer
      Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
      var loc3 = new Microsoft.Maps.Location(29.778530, -95.348663);

      // Add a pin to the map
      var pin3 = new Microsoft.Maps.Pushpin(loc3); 
      pin3.Title = "Loraine St";
      pin3.Description = "Third pin desc";
      pinLayer.push(pin3); //add pushpin to pinLayer
      Microsoft.Maps.Events.addHandler(pin3, 'click', displayInfobox);
      var loc4 = new Microsoft.Maps.Location(29.783419, -95.348963);

      // Add a pin to the map
      var pin4 = new Microsoft.Maps.Pushpin(loc4); 
      pin4.Title = "Quitman St";
      pin4.Description = "pin 4 desc";
      pinLayer.push(pin4); //add pushpin to pinLayer
      Microsoft.Maps.Events.addHandler(pin4, 'click', displayInfobox);
      var loc5 = new Microsoft.Maps.Location(29.802104, -95.342655);

      // Add a pin to the map
      var pin5 = new Microsoft.Maps.Pushpin(loc5); 
      pin5.Title = "Calvalcade";
      pin5.Description = "5th pin desc";
      pinLayer.push(pin5); //add pushpin to pinLayer
      Microsoft.Maps.Events.addHandler(pin5, 'click', displayInfobox);

    // Create a polyline        
    var lineVertices = new Array(loc1,loc2,loc3,loc4,loc5);  //var lineVertices = new Array(loc1, loc2, loc3);

    var line = new Microsoft.Maps.Polyline(lineVertices);

    //map.setView({center:loc2, zoom: 9} );
    map.setView({center:loc2, zoom: 15} );

    map.entities.push(line);
    map.entities.push(pinLayer);
    map.entities.push(infoboxLayer);
 }

function displayInfobox(e) {
    pinInfobox.setOptions({
        title: e.target.Title, 
        description: e.target.Description, 
        visible:true, 
        offset: new Microsoft.Maps.Point(0,25)
    });
    pinInfobox.setLocation(e.target.getLocation());
}

function hideInfobox(e) {
    pinInfobox.setOptions({ visible: false });
}
  </script>
</head>

<body onload="GetMap();">
<div class="wapper">
<div class="contentareaNoM safetybg">
<div id="core">
  <div id='mapDiv' style="positio:relative; margin-left:100px; width:800px; height:800px;"></div>
</div>
  </div>
  </div>
</body>
</html>

Answer 1

您需要具有与您的铁路相对应的折线（带坐标），然后您才能绘制到这些元素上。通过这种方式，您将能够拥有铁路的每一个点。

您可以查看包含具有精确几何信息的那些元素的OpenStreetMap，其中覆盖率良好。

如何在bing map中的铁路上画一条线（在图钉之间）

1 个答案: