使用json输入自定义地图

Question

使用json输入创建自定义地图。我用直线创造了。

所以我只想用弯曲的道路做同样的地图。

所以当用户可以选择输入道路曲线点时。

这是我的小提琴

我也在这里添加我的代码。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Road Map</h3>
<div class="top_adjust"></div>
<div class="clear"></div>
<div class="container">  
 <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="catInfoBox">
</div>
<div class="clear"></div>

CSS

  .clear {
    clear: both;
        }
   .container {
    width:100%;
    position: relative;
    margin-top: 2%;
    max-width: 1024px;
    margin: 0 auto;
    min-height: 10px;
    border-bottom: 1px dotted #000;
   }
    .arrow_box {
position: absolute;
width:150px;
height: 150px;
float:left;
    background: #88b7d5;
    border: 3px solid #036;
     }
   .arrow_box:after{
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 14px;
left: 0%;

   }
 .arrow_box:before {
   border-color: rgba(194, 225, 245, 0);
   border-top-color: #c2e1f5;
   border-width: 36px;
   left: 50%;
   margin-left: -36px;
    }
 .icon {
     width: 22px;
     height: 30px;
     background: url('http://heavenlyyouthallapra.com/wp-content/uploads/2013/09/icon2.png');
     background-repeat: no-repeat;
     position: absolute;
     font-size: 10px;
 padding-top:6px;
     text-align: center;
     background-size: 100%;
     border-top-left-radius: 30px;
 border-top-right-radius: 24px;
 border-bottom-left-radius: 60px;
 border-bottom-right-radius: 0px; 
 }
 .icon p{
     margin-top: 28px;
     background: #FFF;
     color: #000;
 }
 .infoDiv {
     position: absolute;
     top: -10px;
     font-size: 10px;
 }
 .totalLength {
     position: absolute;
     left: 100%;
     top:50px;
     font-size: 14px;
     color: #990033;
 }
 .catInfoBox {
    position: relative;
    display: block;
    max-width: 940px;
    margin: 0 auto;
    margin-top: 5%;
 }
 .catName {
     max-width: 20%;
     float: left;
     padding-left: 3px;
     margin-right: 5%;
 }
 .color {
      background: url('http://heavenlyyouthallapra.com/wp-content/uploads/2013/09/icon2.png');
      background-size: 100%;
 }
 .popupDiv {
     position: absolute;
 }

的Javascript

    road_distance=50;
    points =[0];
    count=0;
    colors=[];
    catId=0;
    topPos=0;
    postions=[];
   cat_name=[];
    cat_obj=[];
   pos=0;
   info=[{ "Polce Station" : [ { "Name" : "Janamaithri",
      "Phone" : "123456",
      "Address" : "Palarivattam,EKM",
      "KMS" : "10"
    },
    { "Name" : "Kasaba",
      "Phone" : "789523",
      "Address" : "Kaloor,EKM",
      "KMS" : "20"
    },
    { "Name" : "Commisionar Office",
      "Phone" : "756213",
      "Address" : "North Railway,EKM",
      "KMS" : "30"
    }
  ] },
  { "Educational Institution" : [ { 
      "Name" : "St jhon HSC",
      "Phone" : "741258",
      "Address" : "Pipeline EKm",
      "KMS" : "15"
    },
    { "Name" : "Govt Hss",
      "Phone" : "894612",
      "Address" : "Deshabhimani,Kaloor",
      "KMS" : "25"
    },
    { "Name" : "Maharajas College",
      "Phone" : "71396",
      "Address" : "Maraine Drive",
      "KMS" : "35",
    }
  ] },
   { "Hospitals" : [ { "Name" : "Lokshore",
      "Phone" : "795642",
      "Address" : "Mamangalam",
      "KMS" : "12"
    },
    { "Name" : "PVS",
      "Phone" : "79431",
      "Address" : "Kaloor",
      "KMS" : "22"
    },
    { "Name" : "KMCT",
      "Phone" : "856756",
      "Address" : "Staduim Junction",
      "KMS" : "33"
    }
  ] },
  { "Govt Offices" : [ { "Name" : "Treasury",
      "Phone" : "897456",
      "Address" : "Thammanam",
      "KMS" : "18"
    },
    { "Name" : "Spices Board",
      "Phone" : "879462",
      "Address" : "Bypass",
      "KMS" : "31"
    }
  ] }
    ];
     $(document).ready(function(){
  console.log(info);
  triggerMap();
     });
    function triggerMap(){
   kilometer=[];
    var arrayvalue=[],kms;
   for(var i in info){
       console.log(i);
     for(var j in info[i]){
         console.log(j);
       cat_name.push(j);
       kms='';
       cat_obj.push((info[i][j]));
       for(var k in info[i][j]){
           console.log(k);
         kms+=info[i][j][k]["KMS"]+",";
       } 
      kms=kms.replace(/,(?=[^,]*$)/, '');
     }
     kilometer.push(kms); 
   } 

    for(var i=0;i<info.length;i++){
            var arrayVal=kilometer[i];
            allDistance=(arrayVal.split(","));
            allDistance.sort(function(a, b) {return a-b;});
            markUpAllkm(allDistance);
            catId++;
            }
            var lastDiv=$('<div/>').addClass('totalLength').html(road_distance+"KM")
            $('.container').append(lastDiv);
            var clear=$('<div/>').addClass('clear');
            $('.container').append(clear);
            var max=getMax(postions);
            max=max*4;
            $('.top_adjust').css(
                    {
                        "height":(max+25)+"px",
                        "transition":"all 02s ease 0s"
                    });
            popUpDisplay();
            adjustIconValFix();
            clearVal(); 
        }

function markUpAllkm(arrayVal){
    var randomColor=createRandomColor();
    iconRegister(randomColor,cat_name[pos]);
    pos++;
    for(i=0;i<arrayVal.length;i++){ 
       var distance=(parseFloat(arrayVal[i]).toFixed(2));
       count++;
       points.push(distance);
       var count=countExist(points,distance);
   var top=count*25;
       postions.push(top);
       var zInd=-(top);
       var iconDiv=$('<div class="icon"/>').addClass('iconId-'+catId+"-"+i+"").css(
               {
                   left:((100/road_distance)*distance)+"%",
                   backgroundColor:randomColor,
                   top:zInd+"px"
               }).attr("rel",catId+","+i);
       if(count<=1){
         $(iconDiv).html('<p>'+distance+"KM</p>");
       }
       $('.container').append(iconDiv);
    }
}


function adjustIconValFix(){
      var obj=$('.icon')
      var marginTop=0;
      var catInfoBoxTop=0
       for(var i=0;i<obj.length;i++){
           var icon=$($('.icon')[i]);
           var parentBgColor=icon.css("backgroundColor");
           icon.find("p").css({
              "color":parentBgColor
           });
           var topPos=Math.abs(icon.position().top);
           if(topPos==25){
                var leftPos=Math.abs(icon.position().left);
                var pTop=parseFloat(icon.find("p").css("marginTop"));
                for(var j=i;j<obj.length;j++){
                    var thisIcon=$($('.icon')[j]);
                    var leftThis=Math.abs($(thisIcon).position().left);
                    var x=Math.abs(leftThis-leftPos);
                    if((x<=30)&&(x!=0)){
                       marginTop=pTop+12;
                       if((catInfoBoxTop<=marginTop)){
                          catInfoBoxTop=marginTop; 
                       }
                       thisIcon.find("p").css({
                          "margin-top":marginTop+"px",
                       });

                    }
                }
           }
       }
     if(catInfoBoxTop<50){ catInfoBoxTop+=50; }
     $('.catInfoBox').css("margin-top",catInfoBoxTop+"px");

} /* function adjustIconValFix  */
   function getMax(list){
     var max=0;
      for(var i=0;i<list.length;i++){
          if(max<parseFloat(list[i])){
              max=parseFloat(list[i]);
          }
      }
      return max;
   }

   function countExist(array,value){
       var counter =0;
       for(var i=0;i<array.length;i++){
           if(array[i]==value){
              counter++; 
           }
       }
       return counter;
   }

  function iconRegister(randomColor,cat_name){
     var div=$('<div/>').addClass("color");
         div.css({
         "height":"36px",
         "padding-left":"20px",
         "width":"2px",
         "float":"left",
         "backgroundColor":randomColor
     });
     var catName=$('<div/>').addClass("catName");
     $(catName).html(cat_name).css({
         "color":randomColor
     });
     $('.catInfoBox').append(div);
     $('.catInfoBox').append(catName);
  }   

  function createRandomColor(){
   var randomColor = (Math.floor(Math.random()*16777215).toString(16));
   if((randomColor==="#FFF")||(randomColor==="#FFFFFF")||(randomColor=='')||(randomColor.length!=6)||(randomColor==="#000")||(randomColor==="#000000")){
        return createRandomColor();
   }
   else {
        if(($.inArray(randomColor,colors))>=0){
          return createRandomColor(); 
        }
   }
  colors.push(randomColor);
  return "#"+randomColor;
}

function popUpDisplay(){
    $('.icon').hover(
       function(){

              var cat_ids='',cat_id=[];
              cat_ids= $(this).attr("rel");
              cat_id=cat_ids.split(",");

              var position=$(this).position();
              x=position.left;
              y=-(position.top);
              topPos=y+150;
              var popupDiv=$('<div/>').addClass('arrow_box').css({
                  "left":x+"px",
                  "color":"#FFF",
                  "top":"-"+topPos+"px"
              }).html(function(){
                  var str='';
                  $.each(cat_obj[cat_id[0]][cat_id[1]], function(i, val) {
                     str+=(i+"\t:"+val);
                     str+="\n";
                  });
                  return str;
              });
              $('.container').append(popupDiv).fadeIn(100);
         },function(){
             $('.container').find('.arrow_box').fadeOut(200).remove();
           });
}

function uniqueArray(list) {
    var result = [];
        $.each(list, function(i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
        });
    return result;
 }
function clearVal(){
    road_distance='';
    points =[0];
    count=0;
    colors=[];
    catId=0;
    topPos=0;
    postions=[];
    $('.road_distance').val('');
    $('.rd_cat').val('');
}