镜头轨迹追踪

源代码编辑器
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 北京某路线轨迹图 </title>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .demo-title {
      position: absolute;
      top: 50px;
      left: 50px;
      z-index: 1;
    }

    h1 {
      margin: 0;
      color: rgba(255, 255, 255, 0.75);
    }

    h3 {
      font-weight: normal;
      margin-top: 5px;
      color: rgba(255, 255, 255, 0.75);
    }

    .start-btn {
      position: absolute;
      bottom: 20px;
      right: 20px;
      padding: 0 18px;
      height: 30px;
      background-color: #1A66FF;
      border-radius: 5px;
      z-index: 1;
      cursor: pointer;
    }

    .start-btn>a {
      color: #fff;
      display: block;
      height: 100%;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
    }

    .amap-ani {
      width: 44px;
      height: 52px;
      background: url('http://a.amap.com/Loca/static/loca-v2/demos/images/track_marker.png');
      background-size: 44px 52px;
    }
  </style>
</head>

<body>
  <div class="demo-title">
    <h1>镜头--北京某地区导航路径追踪</h1>
    <h3>使用轨迹追踪能力追踪导航路径</h3>
  </div>
  <div class="start-btn">
    <a>开始镜头追踪</a>
  </div>
  <div id="map"></div>
  <script
    src="http://webapi.amap.com/maps?v=2.1Beta&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script>
  <script src="http://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>

  <script>
    window.movingDraw = true;
    var map = new AMap.Map('map', {
      terrain: true,
      viewMode: '3D',
      zoom: 13.5,
      center: [102.620455, 30.973672],
      pitch: 45,
      rotation: -90,
      showLabel: true,
      mapStyle: 'amap://styles/509934ebf66e54cbfe10ccae0056c462',
      showBuildingBlock: false,
      dragEnable: false,
      zoomEnable: false,
    });

    var loca = window.loca = new Loca.Container({
      map,
    });
    var path = [
      [102.620455, 30.973672],
      [102.620983, 30.973509],
      [102.621572, 30.973171],
      [102.62226, 30.972732],
      [102.623303, 30.972028],
      [102.62407, 30.971587],
      [102.624621, 30.971056],
      [102.624861, 30.970932],
      [102.625467, 30.97074],
      [102.625925, 30.970587],
      [102.626097, 30.970503],
      [102.626244, 30.970378],
      [102.626672, 30.969989],
      [102.627108, 30.969662],
      [102.628539, 30.968951],
      [102.629371, 30.968594],
      [102.630044, 30.968308],
      [102.630641, 30.968114],
      [102.631158, 30.968034],
      [102.631538, 30.967968],
      [102.631821, 30.967853],
      [102.632196, 30.967649],
      [102.632853, 30.96738],
      [102.633672, 30.967171],
      [102.633813, 30.967099],
      [102.633938, 30.966991],
      [102.634014, 30.966863],
      [102.634064, 30.966727],
      [102.634142, 30.966406],
      [102.63411, 30.966188],
      [102.633993, 30.965986],
      [102.633701, 30.965595],
      [102.633654, 30.96545],
      [102.633634, 30.965307],
      [102.633906, 30.964651],
      [102.634166, 30.964221],
      [102.634372, 30.964006],
      [102.635035, 30.963904],
      [102.636576, 30.963516],
      [102.637393, 30.96333],
      [102.638094, 30.963074],
      [102.638532, 30.962883],
      [102.638924, 30.962616],
      [102.639141, 30.962542],
      [102.639412, 30.962503],
      [102.63967, 30.962478],
      [102.639925, 30.962482],
      [102.640288, 30.96258],
      [102.640659, 30.962719],
      [102.641197, 30.962934],
      [102.641476, 30.963002],
      [102.641762, 30.963021],
      [102.642222, 30.962888],
      [102.642626, 30.96264],
      [102.642985, 30.962378],
      [102.643326, 30.962075],
      [102.643653, 30.961789],
      [102.644024, 30.961593],
      [102.644532, 30.961468],
      [102.645027, 30.96138],
      [102.645491, 30.961254],
      [102.645931, 30.961111],
      [102.646739, 30.960731],
      [102.647004, 30.960562],
      [102.647208, 30.960373],
      [102.647478, 30.960075],
      [102.64783, 30.959846],
      [102.64866, 30.959388],
      [102.649214, 30.959111],
      [102.649324, 30.959104],
      [102.649448, 30.959136],
      [102.649636, 30.959244],
      [102.649978, 30.959435],
      [102.650586, 30.959927],
      [102.651241, 30.960866],
      [102.651541, 30.961247],
      [102.651854, 30.961629],
      [102.651992, 30.961874],
      [102.652061, 30.96216],
      [102.652212, 30.96251],
      [102.652274, 30.962605],
      [102.652391, 30.962698],
      [102.652677, 30.962818],
      [102.652839, 30.962866],
      [102.653003, 30.962892],
      [102.653145, 30.962911],
      [102.653428, 30.962889],
      [102.654088, 30.962697],
      [102.654437, 30.962608],
      [102.654778, 30.962586],
      [102.655313, 30.962669],
      [102.655822, 30.962833],
      [102.656613, 30.963273],
      [102.657072, 30.963403],
      [102.657516, 30.963397],
      [102.658151, 30.963362],
      [102.658806, 30.963425],
      [102.659335, 30.963619],
      [102.659791, 30.963887],
      [102.660783, 30.964359],
      [102.661623, 30.964707],
      [102.661992, 30.965069],
      [102.662291, 30.965404],
      [102.662728, 30.965633],
      [102.663677, 30.965807],
      [102.664344, 30.965798],
      [102.664943, 30.96573],
      [102.665439, 30.96574],
      [102.666209, 30.965802],
      [102.667425, 30.96588],
      [102.668039, 30.966025],
      [102.668659, 30.966223],
      [102.66918, 30.966444],
      [102.6696, 30.966667],
      [102.670046, 30.96699],
      [102.670394, 30.96719],
      [102.670772, 30.96735],
      [102.671176, 30.967418],
      [102.671609, 30.967369],
      [102.671969, 30.967289],
      [102.672362, 30.967137],
      [102.672688, 30.966955],
      [102.672871, 30.966818],
      [102.67308, 30.966703],
      [102.673279, 30.966615],
      [102.673473, 30.966577],
      [102.673612, 30.966558],
      [102.673753, 30.966565],
      [102.674032, 30.966614],
      [102.674333, 30.966736],
      [102.67488, 30.966996],
      [102.675116, 30.96709],
      [102.675364, 30.967135],
      [102.675515, 30.967148],
      [102.675658, 30.96713],
      [102.676026, 30.96701],
      [102.676504, 30.966847],
      [102.676681, 30.966786],
      [102.676881, 30.966817],
      [102.677824, 30.967046],
      [102.678406, 30.967105],
      [102.679198, 30.967101],
      [102.679757, 30.967391],
      [102.680209, 30.967791],
      [102.680689, 30.968058],
      [102.68117, 30.968253],
      [102.681791, 30.968409],
      [102.682817, 30.968586],
      [102.683399, 30.968744],
      [102.683736, 30.968969],
      [102.683948, 30.969323],
      [102.68406, 30.969656],
      [102.684255, 30.970039],
      [102.684545, 30.970231],
      [102.685078, 30.970392],
      [102.6866, 30.9705],
      [102.688109, 30.970816],
      [102.688575, 30.970934],
      [102.688725, 30.971077],
      [102.688807, 30.971276],
      [102.689073, 30.971961],
      [102.689334, 30.97225],
      [102.690776, 30.973397],
      [102.691207, 30.973707],
      [102.691853, 30.974017],
      [102.692454, 30.974156],
      [102.692769, 30.974195],
      [102.693341, 30.974248],
      [102.694711, 30.974302],
      [102.695642, 30.974351],
      [102.696004, 30.974386],
      [102.696359, 30.974483],
      [102.69711, 30.974733],
      [102.697494, 30.974742],
      [102.698541, 30.974654],
      [102.699323, 30.974706],
      [102.699846, 30.974773],
      [102.700405, 30.974921],
      [102.70133, 30.975293],
      [102.702067, 30.975762],
      [102.702831, 30.976012],
      [102.703887, 30.976271],
      [102.704883, 30.976444],
      [102.705596, 30.976709],
      [102.706382, 30.976718],
      [102.707474, 30.976666],
      [102.708384, 30.97669],
      [102.709171, 30.976868],
      [102.709552, 30.977001],
      [102.70982, 30.97716],
      [102.710386, 30.977454],
      [102.710748, 30.977593],
      [102.711001, 30.977628],
      [102.711213, 30.977619],
      [102.712274, 30.977373],
      [102.713164, 30.977089],
      [102.713696, 30.977053],
      [102.714385, 30.977106],
      [102.714798, 30.977166],
      [102.715426, 30.977347],
      [102.716309, 30.977593],
      [102.717449, 30.977835],
      [102.717982, 30.97796],
      [102.718493, 30.978033],
      [102.719058, 30.978007],
      [102.72004, 30.977953],
      [102.720769, 30.977866],
      [102.721135, 30.977778],
      [102.721388, 30.977748],
      [102.721628, 30.977754],
      [102.72194, 30.97779],
      [102.722273, 30.977908],
      [102.723238, 30.978362],
      [102.723634, 30.978483],
      [102.724022, 30.978535],
      [102.724612, 30.978435],
      [102.725085, 30.978242],
      [102.725845, 30.978073],
      [102.727159, 30.977852],
      [102.728005, 30.977773],
      [102.728786, 30.977763],
      [102.729269, 30.977671],
      [102.729876, 30.977426],
      [102.730245, 30.977309],
      [102.730555, 30.977282],
      [102.731073, 30.977326],
      [102.73216, 30.977325],
      [102.733195, 30.977231],
      [102.735779, 30.976871],
      [102.738582, 30.977275],
      [102.740012, 30.976898],
      [102.740521, 30.976848],
      [102.740958, 30.976819],
      [102.741357, 30.976882],
      [102.741622, 30.976868],
      [102.741821, 30.976823],
      [102.742036, 30.976752],
      [102.742214, 30.976643],
      [102.742572, 30.97636],
      [102.74308, 30.976153],
      [102.743611, 30.976151],
      [102.744155, 30.976267],
      [102.744654, 30.976415],
      [102.745375, 30.976685],
      [102.746097, 30.97689],
      [102.746959, 30.976965],
      [102.748975, 30.977107],
      [102.749902, 30.977218],
      [102.750443, 30.977322],
      [102.750868, 30.977464],
      [102.752511, 30.977973],
      [102.752808, 30.978017],
      [102.753056, 30.978009],
      [102.753645, 30.977927],
      [102.754184, 30.977794],
      [102.754746, 30.977633],
      [102.754992, 30.977618],
      [102.755201, 30.977671],
      [102.755865, 30.978031],
      [102.756311, 30.978221],
      [102.756602, 30.978282],
      [102.756848, 30.978266],
      [102.758914, 30.978011],
      [102.759204, 30.978051],
      [102.759489, 30.978137],
      [102.760089, 30.97841],
      [102.76072, 30.978469],
      [102.761288, 30.978487],
      [102.761972, 30.978481],
      [102.762671, 30.97839],
      [102.762925, 30.978384],
      [102.763169, 30.978385],
      [102.763585, 30.978389],
      [102.764093, 30.978289],
      [102.76458, 30.978144],
      [102.765056, 30.978006],
      [102.765477, 30.977954],
      [102.766054, 30.977906],
      [102.7665, 30.977904],
      [102.76671, 30.977923],
      [102.766987, 30.978007],
      [102.767203, 30.97812],
      [102.76757, 30.978301],
      [102.767777, 30.978399],
      [102.76785, 30.978416],
      [102.767918, 30.978428],
      [102.768092, 30.97845],
      [102.768422, 30.978471],
      [102.769034, 30.978523],
      [102.769312, 30.978566],
      [102.769548, 30.978618],
      [102.769851, 30.978723],
      [102.770245, 30.978931],
      [102.77052, 30.97899],
      [102.771251, 30.979176],
      [102.771626, 30.979283],
      [102.771927, 30.979356],
      [102.772244, 30.97941],
      [102.772763, 30.979432],
      [102.773154, 30.97944],
      [102.773514, 30.979475],
      [102.773904, 30.979543],
      [102.774222, 30.979628],
      [102.774504, 30.979708],
      [102.77475, 30.979859],
      [102.774966, 30.980015],
      [102.775149, 30.980216],
      [102.775426, 30.980595],
      [102.775902, 30.981345],
      [102.776724, 30.981858],
      [102.77885, 30.982962],
      [102.779973, 30.983804],
      [102.780329, 30.984017],
      [102.780878, 30.98421],
      [102.78147, 30.984486],
      [102.781741, 30.984804],
      [102.78216, 30.98529],
      [102.782825, 30.985779],
      [102.783142, 30.986345],
      [102.784073, 30.987145],
      [102.784673, 30.987339],
      [102.785095, 30.987566],
      [102.785588, 30.987994],
      [102.785982, 30.988373],
      [102.786446, 30.988659],
      [102.786949, 30.988864],
      [102.787373, 30.989142],
      [102.788105, 30.989612],
      [102.788814, 30.989783],
      [102.789653, 30.989923],
      [102.790126, 30.990147],
      [102.790973, 30.990685],
      [102.791625, 30.990791],
      [102.792777, 30.990803],
      [102.793542, 30.990477],
      [102.794021, 30.990399],
      [102.795064, 30.990441],
      [102.796509, 30.990231],
      [102.797863, 30.989926],
      [102.799504, 30.990064],
      [102.801872, 30.989473],
      [102.803936, 30.989014],
      [102.805857, 30.988779],
      [102.806527, 30.988838],
      [102.807179, 30.989045],
      [102.808194, 30.989473],
      [102.809275, 30.989535],
      [102.810476, 30.989457],
      [102.811314, 30.989346],
      [102.811928, 30.989305],
      [102.812595, 30.989299],
      [102.813017, 30.989385],
      [102.81386, 30.989808],
      [102.814743, 30.990133],
      [102.815854, 30.990504],
      [102.81699, 30.990596],
      [102.818488, 30.990301],
      [102.819357, 30.990612],
      [102.820182, 30.990756],
      [102.820941, 30.990714],
      [102.821301, 30.990638],
      [102.821481, 30.990602],
      [102.821662, 30.990601],
      [102.821882, 30.990646],
      [102.822077, 30.990713],
      [102.822348, 30.990833],
      [102.82271, 30.991001],
      [102.823064, 30.991117],
      [102.823453, 30.991151],
      [102.82389, 30.991103],
      [102.824218, 30.991032],
      [102.824698, 30.990864],
      [102.824949, 30.990831],
      [102.825136, 30.990843],
      [102.82537, 30.99086],
      [102.825599, 30.99088],
      [102.825845, 30.990917],
      [102.82612, 30.990978],
      [102.826332, 30.991057],
      [102.826542, 30.991194],
      [102.826742, 30.991378],
      [102.826941, 30.991541],
      [102.827185, 30.991662],
      [102.827422, 30.991753],
      [102.827742, 30.991836],
      [102.828079, 30.991908],
      [102.828339, 30.991998],
      [102.828755, 30.99217],
      [102.829008, 30.992327],
      [102.829194, 30.992545],
      [102.829334, 30.992772],
      [102.829429, 30.992917],
      [102.829611, 30.993071],
      [102.829925, 30.993177],
      [102.831209, 30.993469],
      [102.832315, 30.99383],
      [102.834562, 30.994623],
    ];

    // 轨迹
    var marker = new AMap.Marker({
      position: [102.834562, 30.994623],
      content:
        '<div class="amap-ani"></div>',
      anchor: 'bottom-center',
      map: map,
    })
    var polyline = new AMap.Polyline({
      path: [[102.620456, 30.973672], [102.620456, 30.973672]],
      isOutline: false,
      strokeColor: '#00E98F',
      strokeOpacity: 1,
      strokeWeight: 16,
      strokeStyle: 'solid',
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 500,
      map: map,
    });
    var finished = false;
    function run() {
      if (!finished) {
        var center = map.getCenter().toArray();
        var lastPath = polyline.getPath();
        lastPath.push(center);
        if (lastPath.length === 1) {
          lastPath.push(center);
        }
        polyline.setPath(lastPath);
        marker.setPosition(center);
      }
      requestAnimationFrame(run);
    }
    run();

    loca.animate.start();
    document.querySelector('.start-btn').addEventListener('click', function () {
      finished = false;
      polyline.setPath([[102.620456, 30.973672], [102.620456, 30.973672]]);
      loca.viewControl.addTrackAnimate({
        path: path, // 镜头轨迹，二维数组，支持海拔
        duration: 120000, // 时长
        timing: [[0, 0.3], [1, 0.7]], // 速率控制器
        rotationSpeed: 10, // 每秒旋转多少度
      }, function () {
        finished = true;
        console.log('完成');
      });
    });
  </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服