老师给看一下

来源：8-11 自由编程

Raymond0913

2020-09-01 18:46:48

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=2857471838daf728ddfe62b4eaf184c0&plugin=AMap.Driving,AMap.Riding,AMap.Transfer,AMap.Autocomplete">
  </script>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet'
    type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自由练习4</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* 防止路径超出地图范围 */
    .amap-lib-driving {
      overflow: auto;
      height: 400px;

    }

    #container {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    #panel {
      position: absolute;
      background: #0090fc;
      top: 223px;
      left: 10px;
      width: 280px;
      border-radius: 5%;
      overflow: auto
    }

    #menu {
      position: absolute;
      background: #0090fc;
      top: 10px;
      left: 10px;
      width: 280px;
      height: 210px;
      border-radius: 5%;
    }

    #icon {
      height: 50px;
      width: 280px;
      margin-top: 10px;
      line-height: 50px;
      text-align: center;
    }

    #icon i {
      color: #fff;
      opacity: .5;
      margin: 0 15px;
      cursor: pointer;
    }

    #startNode,
    #endNode {
      margin: 0 auto;
      height: 25px;
      /* width: 180px; */
      width: 170px;
      background: #2d85f2;
      color: rgb(230, 230, 230);
      font-size: 14px;
      line-height: 25px;

      outline: none;
      border: none;
      color: rgb(230, 230, 230);
      margin-left: 10px;
    }

    /* #icon i.active {
      opacity: 1;
    } */
    input::-webkit-input-placeholder {
      color: #fff;
    }

    input:-ms-input-placeholder {
      color: #fff;
    }

    .origin,
    .destination {
      background-color: #2d85f2;
      margin-bottom: 15px;
      font-size: 20px;
      line-height: 22px;
    }

    #search {
      width: 200px;
      height: 100px;
      position: absolute;
      color: #fff;
      left: 40px;
      top: 80px;
    }

    #btn {
      position: absolute;
      width: 80px;
      height: 30px;
      right: 60px;
      background-color: #559ffb;
      opacity: .6;
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
    }

    #btn:hover {
      cursor: pointer;
    }

    #btn:active {
      background-color: #2d85f2;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div id="panel"></div>
  <div id="menu">
    <div id="icon">
      <i class="fa fa-car"></i>
      <i class="fa fa-bus"></i>
      <i class="fa fa-bicycle"></i>
    </div>
    <div id="search">
      <div class="origin"> 起<input type="text" id="startNode" placeholder="请输入起点"><br /></div>
      <div class="destination"> 终<input type="text" id="endNode" placeholder="请输入终点"><br /></div>
      <div id="btn">开车去</div>
    </div>
  </div>
  <script type="text/javascript">
    var map = new AMap.Map("container", {
      zoom: 11,
      center: [116.567542, 39.997639]
    })
    var icones = document.getElementsByClassName('fa');
    iconArray = ['开车去', "坐公交", '骑车去'];
    icones[0].style.opacity = 1;
    for (let i = 0; i < icones.length; i++) {
      // 给图标id
      icones[i].setAttribute("id", i);
      console.log(icones[i]);
      // 设置点击图标效果
      icones[i].onclick = function () {
        iconID = this.getAttribute("id");
        for (let n = 0; n < icones.length; n++) {
          icones[n].style.opacity = 0.5;
        }
        // 点击后透明度为1
        this.style.opacity = 1;
        // 点击后按钮切换到指定的名称
        btn.innerHTML = iconArray[iconID];
      }
    }
    // 搜索联想框
    // 起点
    new AMap.Autocomplete({
      input: 'startNode'
    });
    // 终点
    new AMap.Autocomplete({
      input: 'endNode'
    });

    // 搜索按钮
    btn.onclick = function () {
      // 清除
      map.clearMap();
      panel.innerHTML = '';
      // 防错
      if (startNode.value == '' && endNode.value == '') {
        return;
      }
      if (this.innerHTML === iconArray[0]) {
        new AMap.Driving({
          map: map,
          panel: 'panel',

        }).search([{
          keyword: startNode.value,
        }, {
          keyword: endNode.value,
        }], function (status, data) {});
      } else if (this.innerHTML === iconArray[1]) {
        new AMap.Transfer({
          map: map,
          panel: 'panel',
          city:"中国"
        }).search([{
          keyword: startNode.value,
          city: '中国'
        }, {
          keyword: endNode.value,
          city: '中国'
        }], function (status, data) {});
      } else if (this.innerHTML === iconArray[2]) {
        new AMap.Riding({
          map: map,
          panel: 'panel',
        }).search([{
          keyword: startNode.value,
        }, {
          keyword: endNode.value,
        }], function (status, data) {});
      }
    }
  </script>
</body>

</html>

写回答

2回答