0

我有一个要求。如果您有任何解决方案或任何参考链接，请检查并告诉我。所以我的要求如下：

我想用一条线、图形或地图来表示一条道路。所以同一条路会有一些主要的地方。所以像动画这样的图形需要代表那条路。因此，用户将从管理面板设置主要地点和从起点到该地点的公里数。所以我想表示一个类似动画的图形，它从起点移动到终点（从起点到终点的道路距离）。根据公里的动态输入显示一个小的弹出窗口或标记。

例如，一条线从 0 公里开始到 10 公里。管理员设置在第 5 公里有一个警察局。所以我想用图形或地图或任何其他图形方式来表示这一点。因此，需要在 5 公里标记上创建一个小标记。

希望我的问题有意义。

谢谢并恭祝安康。

我的答案

html代码

<div class="road_info">
    Enter Road Kilometer : <input type="text" name="road_distance" class="road_distance" />
</div>
<div class="raod_features">
    Enter Police Station KMS (Separated by comma) : <input type="text" class="police" />
</div>
  <input type="submit" class="policeSubmit"/>
<div class="clear"></div>
<h3>Road Map</h3>
<div class="container">   
</div>
<div class="clear"></div>

风格 

.clear {
    clear: both;
   }
 .container {
    width:100%;
    position: relative;
    margin-top: 2%;
    max-width: 1024px;
    margin: 0 auto;
 }
 .raod_features {
     display: block;
 }
 .icon {
     width: 21px;
     height: 30px;
     float: left;
     background:url('icon.png');
     background-repeat: no-repeat;
     padding-top: 35px;
     margin-left: -21px;
     font-size: 10px;
     margin-top: -15px;
 }
 div[class*='div-']{
     text-align: center;
     font-size: 10px;
     height: 15px;
     border-bottom: 1px dotted #000;
     position: relative;
     z-index: 1000;
     color: #3366ff;
 }
 .last_div {
    text-align: right;
    float: right;
    font-size: 12px;
    margin-top: 4px;
    color: #000;
  }

* *jQuery 

  <script type="text/javascript">
  start_km=0;
  road_distance='';
   $(document).ready(function(){ 
   $('.policeSubmit').click(function(){
      var stations= $('.police').val();
      var stationArray=stations.split(",");
      stationArray.sort(function(a, b) {return a-b;});
      markUpkm(stationArray,start_km);
      popUpDisplay();
      clearVal();
   });

});

function markUpkm(arrayValue,kmValue){
    var pos=kmValue;
    var i=0;
    var total_distance=parseFloat($('.road_distance').val()).toFixed(2);
    for(i=0;i<arrayValue.length;i++){
        var divWidth=(parseFloat(arrayValue[i]).toFixed(2))-pos;
        divNew=$('<div/>');
        iconDiv=$('<div class="icon"/>');
        divNew.addClass('div-'+i).css({"width":(((100/total_distance)*divWidth))+"%","float":"left"}).html((divWidth).toFixed(2)+"KM");
        $('.container').append(divNew);
        $(iconDiv).addClass('iconId-'+i);
        $(divNew).after(iconDiv);
        pos+=divWidth;
        $(iconDiv).after().append('<div/>').html(pos+"KM");
    }
    var lastDiv=$('<div/>').addClass('div-'+(i+1)).css({width:(((100/total_distance)* (total_distance-pos)))+"%",float:"left"}).html((total_distance-pos).toFixed(2)+"KM");
    $('.container').append(lastDiv);
    totalDist=$('<div class="last_div"/>').html(total_distance+"KM");
    $(lastDiv).after(totalDist);
  }
   function clearVal(){
  start_km=0;
  road_distance=0;
  $('.road_distance').val('');
  $('.police').val('');
  }
</script>

当悬停时，我需要一个带有一些描述的小弹出窗口。

如果您对弹出窗口有任何解决方案，请告诉我。

谢谢。

4

0 回答 0