Skip to content

Instantly share code, notes, and snippets.

@fooleap

fooleap/use-amap-api-to-show-running-line.html

Last active December 18, 2023 09:29
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save fooleap/2e524fd8d7164e090f0e25452fec734a to your computer and use it in GitHub Desktop.
Save fooleap/2e524fd8d7164e090f0e25452fec734a to your computer and use it in GitHub Desktop.
Download ZIP
高德地图 API 显示跑步路线
Raw
use-amap-api-to-show-running-line.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no" />
<title>跑步路线地图</title>
<style>
html,body, #map{
margin: 0;
width: 100%;
height: 100%;
}
.marker-circle{
width: 9px;
height: 9px;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.marker-circle.green{
background-color: #60AB43;
}
.marker-circle.red{
background-color: #f80000;
}
.marker-circle.black{
background-color: #000000;
}
.running-distance{
background-color: #000;
font-size: 12px;
font-family: 'AlternateBoldFont', 'MHei PRC Bold';
color: #fff;
width: 50px;
height: 24px;
line-height: 24px;
text-align: right;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
position: relative;
white-space: nowrap;
}
.running-distance:after{
content: "";
right: -24px;
top: 0;
position: absolute;
height: 0;
width: 0;
border: 12px solid transparent;
border-left-color: #000;
}
.running-distance .running-number{
color: #83DD00;
}
</style>
<script src="//webapi.amap.com/maps?v=1.3&key=29076a35fd5abd25add2eb561488a73f"></script>
</head>
<body>
<div id="map" title="点击地图启动轨迹动画"></div>
<script>
var lineArr = [
[116.81333,23.48132],
[116.81333,23.48132],
[116.81333,23.48132],
[116.81352,23.48133],
[116.81353,23.48124],
[116.81342,23.48117],
[116.81333,23.48114],
[116.81323,23.48112],
[116.81313,23.48107],
[116.81308,23.48100],
[116.81306,23.48090],
[116.81310,23.48078],
[116.81314,23.48070],
[116.81317,23.48060],
[116.81319,23.48051],
[116.81321,23.48041],
[116.81322,23.48032],
[116.81325,23.48023],
[116.81328,23.48012],
[116.81324,23.48003],
[116.81313,23.48004],
[116.81303,23.48005],
[116.81293,23.48003],
[116.81292,23.47993],
[116.81282,23.47987],
[116.81273,23.47982],
[116.81265,23.47977],
[116.81255,23.47974],
[116.81244,23.47974],
[116.81233,23.47980],
[116.81221,23.47981],
[116.81209,23.47976],
[116.81202,23.47967],
[116.81200,23.47955],
[116.81204,23.47946],
[116.81207,23.47937],
[116.81208,23.47928],
[116.81209,23.47918],
[116.81210,23.47909],
[116.81209,23.47898],
[116.81208,23.47886],
[116.81206,23.47876],
[116.81210,23.47865],
[116.81202,23.47858],
[116.81190,23.47857],
[116.81180,23.47857],
[116.81169,23.47855],
[116.81158,23.47851],
[116.81148,23.47848],
[116.81137,23.47846],
[116.81127,23.47847],
[116.81115,23.47846],
[116.81105,23.47843],
[116.81095,23.47844],
[116.81084,23.47843],
[116.81076,23.47850],
[116.81074,23.47860],
[116.81079,23.47869],
[116.81082,23.47878],
[116.81084,23.47889],
[116.81086,23.47900],
[116.81085,23.47910],
[116.81083,23.47921],
[116.81082,23.47932],
[116.81079,23.47942],
[116.81074,23.47953],
[116.81072,23.47963],
[116.81074,23.47974],
[116.81085,23.47975],
[116.81097,23.47975],
[116.81108,23.47977],
[116.81120,23.47979],
[116.81129,23.47982],
[116.81132,23.47992],
[116.81134,23.48001],
[116.81134,23.48001],
[116.81138,23.48025],
[116.81137,23.48035],
[116.81135,23.48046],
[116.81134,23.48057],
[116.81134,23.48069],
[116.81133,23.48078],
[116.81131,23.48087],
[116.81144,23.48089],
[116.81155,23.48092],
[116.81165,23.48097],
[116.81172,23.48105],
[116.81171,23.48116],
[116.81173,23.48128],
[116.81173,23.48138],
[116.81177,23.48147],
[116.81178,23.48158],
[116.81181,23.48169],
[116.81182,23.48179],
[116.81183,23.48189],
[116.81181,23.48199],
[116.81179,23.48208],
[116.81179,23.48208],
[116.81175,23.48221],
[116.81175,23.48232],
[116.81173,23.48241],
[116.81174,23.48252],
[116.81184,23.48256],
[116.81192,23.48263],
[116.81194,23.48272],
[116.81192,23.48283],
[116.81184,23.48293],
[116.81184,23.48302],
[116.81190,23.48309],
[116.81193,23.48318],
[116.81188,23.48329],
[116.81182,23.48337],
[116.81178,23.48345],
[116.81177,23.48357],
[116.81178,23.48366],
[116.81189,23.48372],
[116.81199,23.48375],
[116.81210,23.48374],
[116.81221,23.48373],
[116.81232,23.48376],
[116.81241,23.48379],
[116.81251,23.48378],
[116.81261,23.48378],
[116.81270,23.48381],
[116.81282,23.48385],
[116.81293,23.48386],
[116.81303,23.48388],
[116.81315,23.48390],
[116.81326,23.48393],
[116.81336,23.48397],
[116.81344,23.48402],
[116.81353,23.48399],
[116.81365,23.48394],
[116.81376,23.48392],
[116.81385,23.48399],
[116.81396,23.48400],
[116.81407,23.48400],
[116.81415,23.48405],
[116.81426,23.48404],
[116.81436,23.48400],
[116.81446,23.48396],
[116.81457,23.48392],
[116.81468,23.48387],
[116.81479,23.48385],
[116.81488,23.48382],
[116.81501,23.48381],
[116.81512,23.48378],
[116.81524,23.48376],
[116.81534,23.48376],
[116.81539,23.48367],
[116.81539,23.48356],
[116.81537,23.48346],
[116.81534,23.48335],
[116.81532,23.48326],
[116.81530,23.48316],
[116.81526,23.48306],
[116.81522,23.48295],
[116.81518,23.48286],
[116.81518,23.48286],
[116.81509,23.48278],
[116.81507,23.48267],
[116.81507,23.48257],
[116.81505,23.48246],
[116.81506,23.48235],
[116.81507,23.48225],
[116.81506,23.48216],
[116.81504,23.48207],
[116.81500,23.48198],
[116.81497,23.48188],
[116.81493,23.48178],
[116.81486,23.48171],
[116.81479,23.48163],
[116.81475,23.48152],
[116.81473,23.48142],
[116.81468,23.48132],
[116.81464,23.48122],
[116.81460,23.48113],
[116.81453,23.48103],
[116.81452,23.48094],
[116.81451,23.48084],
[116.81449,23.48074],
[116.81448,23.48065],
[116.81444,23.48055],
[116.81441,23.48045],
[116.81437,23.48036],
[116.81434,23.48026],
[116.81430,23.48015],
[116.81427,23.48005],
[116.81423,23.47996],
[116.81420,23.47985],
[116.81418,23.47974],
[116.81419,23.47965],
[116.81415,23.47954],
[116.81412,23.47945],
[116.81409,23.47936],
[116.81406,23.47925],
[116.81403,23.47916],
[116.81399,23.47905],
[116.81395,23.47895],
[116.81389,23.47888],
[116.81384,23.47878],
[116.81382,23.47869],
[116.81381,23.47859],
[116.81378,23.47848],
[116.81372,23.47838],
[116.81366,23.47828],
[116.81361,23.47817],
[116.81359,23.47807],
[116.81357,23.47798],
[116.81354,23.47787],
[116.81349,23.47777],
[116.81345,23.47768],
[116.81343,23.47757],
[116.81339,23.47745],
[116.81336,23.47736],
[116.81332,23.47726],
[116.81326,23.47716],
[116.81321,23.47708],
[116.81326,23.47700],
[116.81338,23.47697],
[116.81348,23.47694],
[116.81360,23.47690],
[116.81370,23.47684],
[116.81380,23.47681],
[116.81389,23.47676],
[116.81400,23.47672],
[116.81409,23.47669],
[116.81422,23.47668],
[116.81431,23.47674],
[116.81435,23.47683],
[116.81440,23.47691],
[116.81446,23.47699],
[116.81449,23.47708],
[116.81449,23.47718],
[116.81450,23.47728],
[116.81451,23.47739],
[116.81452,23.47749],
[116.81451,23.47759],
[116.81454,23.47769],
[116.81455,23.47780],
[116.81459,23.47790],
[116.81465,23.47801],
[116.81469,23.47810],
[116.81473,23.47819],
[116.81480,23.47828],
[116.81481,23.47839],
[116.81485,23.47849],
[116.81488,23.47860],
[116.81491,23.47869],
[116.81490,23.47880],
[116.81489,23.47889],
[116.81493,23.47900],
[116.81500,23.47909],
[116.81504,23.47919],
[116.81506,23.47928],
[116.81508,23.47938],
[116.81511,23.47949],
[116.81516,23.47958],
[116.81520,23.47967],
[116.81527,23.47976],
[116.81529,23.47985],
[116.81527,23.47995],
[116.81524,23.48004],
[116.81529,23.48013],
[116.81536,23.48022],
[116.81542,23.48030],
[116.81547,23.48040],
[116.81552,23.48048],
[116.81557,23.48057],
[116.81564,23.48065],
[116.81569,23.48073],
[116.81574,23.48083],
[116.81573,23.48093],
[116.81571,23.48102],
[116.81574,23.48112],
[116.81577,23.48122],
[116.81577,23.48131],
[116.81581,23.48140],
[116.81586,23.48149],
[116.81591,23.48159],
[116.81596,23.48167],
[116.81600,23.48176],
[116.81605,23.48187],
[116.81609,23.48198],
[116.81610,23.48207],
[116.81613,23.48218],
[116.81615,23.48228],
[116.81618,23.48236],
[116.81623,23.48246],
[116.81627,23.48255],
[116.81629,23.48267],
[116.81631,23.48276],
[116.81633,23.48286],
[116.81636,23.48295],
[116.81638,23.48304],
[116.81643,23.48313],
[116.81646,23.48324],
[116.81648,23.48333],
[116.81653,23.48343],
[116.81659,23.48352],
[116.81666,23.48361],
[116.81671,23.48371],
[116.81675,23.48380],
[116.81684,23.48383],
[116.81694,23.48377],
[116.81704,23.48371],
[116.81714,23.48364],
[116.81723,23.48360],
[116.81733,23.48356],
[116.81743,23.48352],
[116.81752,23.48346],
[116.81762,23.48340],
[116.81772,23.48337],
[116.81782,23.48333],
[116.81792,23.48329],
[116.81802,23.48323],
[116.81812,23.48318],
[116.81819,23.48310],
[116.81814,23.48301],
[116.81806,23.48294],
[116.81803,23.48285],
[116.81801,23.48275],
[116.81799,23.48266],
[116.81797,23.48257],
[116.81797,23.48246],
[116.81799,23.48237],
[116.81797,23.48226],
[116.81796,23.48215],
[116.81792,23.48205],
[116.81790,23.48195],
[116.81787,23.48186],
[116.81785,23.48176],
[116.81782,23.48167],
[116.81778,23.48157],
[116.81774,23.48147],
[116.81771,23.48138],
[116.81767,23.48129],
[116.81764,23.48120],
[116.81760,23.48109],
[116.81757,23.48099],
[116.81752,23.48089],
[116.81749,23.48079],
[116.81744,23.48071],
[116.81745,23.48061],
[116.81741,23.48050],
[116.81738,23.48040],
[116.81735,23.48031],
[116.81731,23.48022],
[116.81726,23.48014],
[116.81722,23.48004],
[116.81720,23.47995],
[116.81713,23.47986],
[116.81708,23.47978],
[116.81702,23.47969],
[116.81698,23.47959],
[116.81695,23.47949],
[116.81691,23.47939],
[116.81690,23.47928],
[116.81688,23.47919],
[116.81685,23.47908],
[116.81681,23.47897],
[116.81679,23.47886],
[116.81677,23.47874],
[116.81674,23.47864],
[116.81669,23.47856],
[116.81664,23.47847],
[116.81658,23.47839],
[116.81654,23.47830],
[116.81650,23.47819],
[116.81650,23.47810],
[116.81650,23.47800],
[116.81647,23.47790],
[116.81645,23.47781],
[116.81640,23.47771],
[116.81639,23.47761],
[116.81637,23.47750],
[116.81635,23.47741],
[116.81634,23.47732],
[116.81634,23.47723],
[116.81638,23.47714],
[116.81638,23.47703],
[116.81635,23.47693],
[116.81632,23.47684],
[116.81628,23.47674],
[116.81627,23.47662],
[116.81622,23.47651],
[116.81618,23.47643],
[116.81613,23.47632],
[116.81614,23.47622],
[116.81615,23.47612],
[116.81613,23.47603],
[116.81601,23.47602],
[116.81591,23.47607],
[116.81580,23.47611],
[116.81567,23.47614],
[116.81558,23.47618],
[116.81549,23.47622],
[116.81538,23.47625],
[116.81528,23.47630],
[116.81517,23.47634],
[116.81507,23.47638],
[116.81497,23.47642],
[116.81488,23.47646],
[116.81478,23.47649],
[116.81468,23.47653],
[116.81459,23.47657],
[116.81448,23.47661],
[116.81437,23.47665],
[116.81427,23.47669],
[116.81418,23.47673],
[116.81406,23.47676],
[116.81396,23.47681],
[116.81386,23.47685],
[116.81375,23.47688],
[116.81365,23.47693],
[116.81355,23.47696],
[116.81344,23.47699],
[116.81333,23.47701],
[116.81323,23.47705],
[116.81319,23.47714],
[116.81319,23.47725],
[116.81321,23.47736],
[116.81324,23.47745],
[116.81327,23.47754],
[116.81328,23.47763],
[116.81330,23.47773],
[116.81334,23.47781],
[116.81338,23.47791],
[116.81340,23.47801],
[116.81346,23.47807],
[116.81336,23.47806],
[116.81324,23.47808],
[116.81312,23.47809],
[116.81301,23.47812],
[116.81291,23.47810],
[116.81279,23.47808],
[116.81268,23.47804],
[116.81258,23.47804],
[116.81248,23.47801],
[116.81243,23.47809],
[116.81231,23.47808],
[116.81223,23.47800],
[116.81213,23.47792],
[116.81203,23.47790],
[116.81193,23.47788],
[116.81183,23.47786],
[116.81171,23.47786],
[116.81163,23.47779],
[116.81153,23.47784],
[116.81143,23.47786],
[116.81133,23.47784],
[116.81123,23.47783],
[116.81111,23.47782],
[116.81100,23.47784],
[116.81089,23.47783],
[116.81079,23.47782],
[116.81076,23.47792],
[116.81077,23.47801],
[116.81075,23.47811],
[116.81068,23.47820],
[116.81065,23.47829],
[116.81060,23.47838],
[116.81049,23.47835],
[116.81039,23.47834],
[116.81036,23.47842],
[116.81024,23.47846],
[116.81013,23.47844],
[116.81003,23.47839],
[116.80994,23.47835],
[116.80984,23.47829],
[116.80973,23.47825],
[116.80962,23.47826],
[116.80949,23.47825],
[116.80939,23.47823],
[116.80927,23.47822],
[116.80917,23.47825],
[116.80911,23.47832],
[116.80913,23.47842],
[116.80916,23.47851],
[116.80917,23.47861],
[116.80918,23.47871],
[116.80917,23.47881],
[116.80918,23.47892],
[116.80925,23.47899],
[116.80929,23.47908],
[116.80933,23.47917],
[116.80935,23.47927],
[116.80939,23.47937],
[116.80940,23.47946],
[116.80944,23.47956],
[116.80945,23.47965],
[116.80946,23.47976],
[116.80950,23.47986],
[116.80951,23.47996],
[116.80952,23.48006],
[116.80952,23.48017],
[116.80957,23.48027],
[116.80963,23.48036],
[116.80968,23.48045],
[116.80972,23.48055],
[116.80976,23.48064],
[116.80980,23.48074],
[116.80983,23.48083],
[116.80987,23.48093],
[116.80990,23.48103],
[116.80991,23.48113],
[116.80994,23.48122],
[116.80994,23.48131],
[116.81000,23.48140],
[116.81000,23.48150],
[116.81003,23.48160],
[116.81008,23.48169],
[116.81012,23.48179],
[116.81016,23.48190],
[116.81020,23.48201],
[116.81025,23.48210],
[116.81030,23.48220],
[116.81032,23.48230],
[116.81030,23.48241],
[116.81034,23.48249],
[116.81041,23.48257],
[116.81046,23.48267],
[116.81052,23.48276],
[116.81054,23.48285],
[116.81054,23.48295],
[116.81055,23.48305],
[116.81058,23.48316],
[116.81061,23.48324],
[116.81066,23.48332],
[116.81073,23.48341],
[116.81074,23.48352],
[116.81075,23.48362],
[116.81079,23.48371],
[116.81082,23.48381],
[116.81083,23.48391],
[116.81086,23.48402],
[116.81087,23.48411],
[116.81091,23.48421],
[116.81095,23.48431],
[116.81097,23.48440],
[116.81100,23.48448],
[116.81104,23.48458],
[116.81108,23.48468],
[116.81113,23.48475],
[116.81116,23.48485],
[116.81119,23.48497],
[116.81122,23.48507],
[116.81124,23.48519],
[116.81128,23.48529],
[116.81130,23.48540],
[116.81133,23.48550],
[116.81136,23.48559],
[116.81139,23.48568],
[116.81143,23.48577],
[116.81148,23.48586],
[116.81150,23.48596],
[116.81153,23.48605],
[116.81160,23.48613],
[116.81172,23.48613],
[116.81182,23.48607],
[116.81192,23.48603],
[116.81202,23.48599],
[116.81212,23.48595],
[116.81221,23.48590],
[116.81231,23.48585],
[116.81241,23.48581],
[116.81250,23.48577],
[116.81260,23.48572],
[116.81270,23.48567],
[116.81281,23.48563],
[116.81292,23.48558],
[116.81300,23.48553],
[116.81309,23.48548],
[116.81318,23.48545],
[116.81329,23.48541],
[116.81339,23.48537],
[116.81351,23.48534],
[116.81361,23.48529],
[116.81371,23.48524],
[116.81380,23.48521],
[116.81390,23.48515],
[116.81401,23.48510],
[116.81411,23.48506],
[116.81422,23.48501],
[116.81432,23.48498],
[116.81441,23.48493],
[116.81450,23.48489],
[116.81460,23.48484],
[116.81470,23.48480],
[116.81479,23.48476],
[116.81488,23.48472],
[116.81497,23.48468],
[116.81507,23.48463],
[116.81518,23.48458],
[116.81528,23.48455],
[116.81538,23.48450],
[116.81547,23.48445],
[116.81556,23.48440],
[116.81565,23.48435],
[116.81576,23.48429],
[116.81586,23.48424],
[116.81595,23.48418],
[116.81605,23.48414],
[116.81614,23.48409],
[116.81624,23.48404],
[116.81633,23.48401],
[116.81643,23.48396],
[116.81653,23.48392],
[116.81664,23.48389],
[116.81673,23.48385],
[116.81679,23.48377],
[116.81675,23.48368],
[116.81670,23.48358],
[116.81666,23.48348],
[116.81661,23.48338],
[116.81658,23.48328],
[116.81653,23.48318],
[116.81650,23.48309],
[116.81647,23.48299],
[116.81643,23.48290],
[116.81640,23.48281],
[116.81637,23.48272],
[116.81634,23.48262],
[116.81630,23.48253],
[116.81625,23.48244],
[116.81624,23.48233],
[116.81621,23.48224],
[116.81617,23.48216],
[116.81614,23.48206],
[116.81611,23.48196],
[116.81608,23.48186],
[116.81602,23.48176],
[116.81591,23.48172],
[116.81581,23.48174],
[116.81571,23.48177],
[116.81561,23.48182],
[116.81552,23.48185],
[116.81543,23.48189],
[116.81531,23.48191],
[116.81521,23.48194],
[116.81510,23.48199],
[116.81500,23.48200],
[116.81490,23.48203],
[116.81481,23.48198],
[116.81472,23.48194],
[116.81462,23.48192],
[116.81451,23.48193],
[116.81439,23.48193],
[116.81428,23.48192],
[116.81418,23.48190],
[116.81406,23.48188],
[116.81395,23.48185],
[116.81385,23.48183],
[116.81374,23.48184],
[116.81362,23.48183],
[116.81352,23.48181],
[116.81346,23.48173],
[116.81338,23.48166],
[116.81328,23.48165],
[116.81325,23.48156],
[116.81329,23.48146]
];
// 坐标总数，起终点坐标
var count = lineArr.length;
var first = lineArr[0];
var last = lineArr[count - 1];
// 构造地图对象
var map = new AMap.Map('map');
// 跑步路线折线
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
lineJoin: 'round',
strokeColor: "#52EE06",
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: "solid"
});
// 地图自适应
map.setFitView();
// 起点
new AMap.Marker({
map: map,
position: first,
zIndex: 11,
offset: new AMap.Pixel(-8, -8),
content: '<div class="marker-circle green"></div>'
});
// 终点
new AMap.Marker({
map: map,
position: last,
zIndex: 11,
offset: new AMap.Pixel(-8, -8),
content: '<div class="marker-circle red"></div>'
});
// 距离
var distance = new AMap.Marker({
map: map,
position: last,
zIndex: 10,
offset: new AMap.Pixel(-64, -12),
// 采用 Polyline 类的 getLength() 方法直接获取折线长度
content: '<div class="running-distance"><span class="running-number">' + (polyline.getLength()/1000).toFixed(1) + '</span>公里</div>'
});
// 变化的折线
var runPolyline = new AMap.Polyline({
map: map,
lineJoin: 'round',
strokeColor: "#52EE06",
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: "solid",
});
// 移动的点标记
var current = new AMap.Marker({
map: map,
zIndex: 12,
visible: false,
offset: new AMap.Pixel(-8, -8),
content: '<div class="marker-circle black"></div>'
});
var running = false;
var i = 0;
// 点击地图事件
map.on('click', function() {
// 将上面上面折线改为黑色透明作为底层
polyline.setOptions({
strokeColor: '#000000',
strokeOpacity: 0.2
});
// 显示画线点标记
current.show();
running = running == false ? true : false;
var step = parseInt(count/50);
step = step == 0 ? 1 : step;
drawline(step);
});
// 画线动画
function drawline(step) {
if ( i < count / step ) {
if( running == true ){
var start = i * step;
var end = (i + 1) * step >= count ? count - 1 : (i + 1) * step;
current.setPosition(lineArr[end]);
runPolyline.setPath(lineArr.slice(0, end+1));
distance.setContent('<div class="running-distance"><span class="running-number">' + (runPolyline.getLength()/1000).toFixed(1) + '</span>公里</div>');
i++;
} else {
return;
}
} else{
current.hide();
i = 0;
running = false;
return;
}
setTimeout(function(){
drawline(step);
}, 40)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment