WeChatアプレットトラック再生の実装と遭遇した落とし穴の詳細な説明

WeChatアプレットトラック再生の実装と遭遇した落とし穴の詳細な説明

WeChat アプレットの軌跡再生では、主に線描画操作にポリラインを使用し、車の移動操作にマーカーを使用します。効果図は以下のとおりです。

具体的な実装コード:

trackplay.wxml ファイル

<!--pages/tracker/tracker.wxml-->
<map id="mymap" 経度="{{mapCenter.longitude}}" 緯度="{{mapCenter.latitude}}" スケール="{{scale}}" マーカー="{{markers}}" ポリライン="{{polylineSettings}}" include-points="polygons" 設定="{{mapSettings}}" bindregionchange="updatedMap" 最大スケール="16">
  <カバービュー>{{メッセージを表示}}</カバービュー>
  <カバービュークラス="トラッカーイメージ" bindtap="トラッカー設定">
    <カバーイメージ class="lazy" data-src="{{imageSrc}}"></カバーイメージ>
  </カバービュー>
  <!--cover-view class="trackerQuick" bindtap="trackerQuickPlay">
    <カバーイメージ style="line-height:1;" src="{{imageSpeedAdd}}"></カバーイメージ>
  </カバービュー>
  <カバービュー class="trackerSlow" bindtap="trackerSlowPlay">
    <カバーイメージ src="{{imageSpeedSlow}}"></カバーイメージ>
  </カバービュー-->
  <カバービュー class="trackerPause" bindtap="trackerPause">
    <カバーイメージ src="{{imagePause}}"></カバーイメージ>
  </カバービュー>
  <カバービュークラス="trackerPlay" bindtap="trackerPlay">
    <カバーイメージ src="{{imagePlay}}"></カバーイメージ>
  </カバービュー>
</マップ>

trackplay.js ファイル

const app = getApp();
ページ({

 /**
  * ページの初期データ */
 データ: {
  mapCtx: null、
  スケール: 14,
  画像ソース: '/images/tracker/tracker-search.png',
  画像スピード追加: '/images/tracker/speed-add.png',
  画像速度が遅い: '/images/tracker/speed-slow.png',
  画像の一時停止: '/images/tracker/pause.png',
  画像再生: '/images/tracker/play.png',
  マップセンター: {
   経度: 113.324520、
   緯度: 23.099994
  },
  markers: [{ //マーカーポイントは、マップ上のマーカーの位置を表示するために使用されます iconPath: "/images/tracker/car.png",
   id: 1,
   幅: 25,
   高さ: 40,
   経度: 113.324520、
   緯度: 23.099994、
   rotate: 0, //デフォルトの回転角度は0です
   アンカー:
    x: .5,
    y: .5
   }, //緯度と経度は注釈アイコンのアンカーポイント、デフォルトの下端の中点 {x: .5、y: 1} にあります。
   callout: { //マークポイントの上のバブルウィンドウ content: 'トラック再生',
    色: '#fff',
    フォントサイズ: 16,
    境界半径: 3,
    境界線の幅: 1,
    境界線の色: '#07c160',
    背景色: '#fff',
    パディング: 5,
    テキスト配置: 'center'、
    表示: 'BYCLICK'
   },
  }],
  Polylinesettings:[{//路线ポイント:[{緯度:22.596206、経度:113.87317、gpsbearing:244}、{latitude:22.596216、瞬時:113.873192、gpsvearing:244}、{latitude:22.596213、 、{緯度:22.596212、経度:113.873205、gpsbearing:244}、{緯度:22.596155、経度:113.873147、gpsbearing:244}、{緯度:22.59614、gpsitured:22.2 itude:113.873146、gpsbearing:244}、{latitude:22.596098、経度:113.873101、gpsvearing:244}、{緯度:22.596123、経度:113.873095、gps bearing:243.87ing:22.59613、 244}、{緯度:22.596154、経度:113.873006、gpsbearing:244}、{latitude:22.596142、経度:113.873006、GPSBearing:244}、{latitude:22.596131、gistituded:113.873009、ed 7、経度:113.873011、GPSBearing:244}、{Latitude:22.596112、経度:113.873014、GPSBearing:244}、{緯度:22.596114、経度:113.873021、GPSBearin 244}、{緯度:22.596131、経度:113.873039、GPSBearing:244}、{緯度:22.596127、経度:113.873046、GPSBearing:244}、{latitude:22.596116、gpsituded:2444 7、経度:113.873055、GPSBearing:244}、{Latitude:22.596084、経度:113.87306、GPS bearing:244}、{緯度:22.596074、経度:113.873069、GPSEDING:2444 ing:244}、{緯度:22.596046、経度:113.873075、gpsbearing:244}、{latitude:22.596028、経度:113.873072、GPSBearing:244}、 5982、経度:113.873054、gpsbearing:244}、{latitude:22.595967、経度:113.873067、gpsvearing:244}、{latitude:22.595971、lunditude:lungitud GPSBEARING:244}、{Latitude:22.595984、経度:113.873035、GPSBEARING:244}、{緯度:22.595992、経度:113.87303、GPSBEARING:244}、 96017、経度:113.873057、gpsbearing:244}、{latitude:22.596017、経度:113.873056、gpsbearing:244}、{latitude:22.596011、経度:113.87305、gpsed:22.849ベアリング:244}、{緯度:22.596006、経度:113.87305、gpsbearing:244}、{latitude:22.596004、経度:113.873053、GPSBearing:244}、{latitude:22.596004、経度:113.873054、2454、edv.5.549} 89、経度:113.873044、gpsbearing:244}、{latitude:22.595996、経度:113.873051、gpseding:244}、{緯度:22.596023、22.596023、経度:113.873084、gpsitude:22.59603ベアリング:244}、{緯度:22.59604、経度:113.873076、gpsbearing:244}、{latitude:22.596041、経度:113.873077、gpsbearing:244}、{latitude:22.596035、laTitude:113.87308、gpsed:113.87308、 6023、経度:113.873069、gpsbearing:244}、{latitude:22.59602、経度:113.873076、gpsbearing:244}、{緯度:22.596019、22.596019、経度:113.873085、gpsitude:244}、{latitude:22.596027:22.596027 PSBearing:244}、{Latitude:22.596018、経度:113.873105、GPSBearing:244}、{緯度:22.596012、経度:113.873108、GPSBearing:244}、 596009、経度:113.873119、gpsbearing:244}、{latitude:22.59601、経度:113.873126、GPSBearing:244}、{緯度:22.596015、長所:113.873135、GPSBEARING:22.5 43、gpsbearing:244}、{latitude:22.596017、経度:113.873152、GPSBearing:244}、{緯度:22.595972、揺れ:113.873132、GPSBEARING:244}、{latitude:22.595999、 、{緯度:22.595982、経度:113.873143、gpsbearing:244}、{latitude:22.595988、経度:113.873132、gpsbearing:244}、{latitude:22.595988、latituden 、経度:113.873135、gpsbearing:244}、{latitude:22.595992、経度:113.87314、gpseding:244}、{緯度:22.596003、経度:113.873144、gpsitured:244耳:244}、{緯度:22.596009、経度:113.873165、GPSBearing:244}、{latitude:22.59602、経度:113.873171、GPSBearing:244}、 596044、経度:113.873179、gpsbearing:244}、{緯度:22.596049、経度:113.873176、gpsbearing:244}、{緯度:22.59605、経度:113.873174、gpsitude:22.5.96 3177、gpsbearing:244}、{latitude:22.596048、経度:113.87318、gpsbearing:244}、{latitude:22.596049、doctitude:113.873186、gpsbearing:244}、{latitude:22.596052、1183183183183183 }、{緯度:22.596053、経度:113.873192、gpsbearing:244}、{latitude:22.596049、経度:113.873199、GPSBearing:244}、{latitude:22.59605、cuseitud 4、経度:113.873201、gpsbearing:244}、{latitude:22.596061、経度:113.873211、gpsed:22.596063、22.596063、経度:113.873215、gpsitud:244}、22.5960ベアリング:244}、{緯度:22.59607、経度:113.873222、GPSBearing:244}、{latitude:22.596067、経度:113.873219、GPSBearing:244}、{緯度:22.596063、1133.8315:243.8315、2433.8315: 22.59606、経度:113.873219、gpsbearing:244}、{latitude:22.596061、経度:113.873213、gpsbearing:244}、{緯度:22.595382、経度:113.873102、latided:213.873102、22.5.5.0、 73132、gpsbearing:0}、{latitude:22.595371、経度:113.873124、gpsbearing:0}、{latitude:22.595353、経度:113.873115、gpsbearing:0}、{緯度:22.5999278、113333333333 {緯度:22.595199、経度:113.873142、gpsbearing:0}、{latitude:22.594997、経度:113.87324、gpsbearing:91}、{緯度:22.595042、gpsitud 113.873482、gpsbearing:14}、{latitude:22.595167、経度:113.873615、gpsvearing:264}、{latitude:22.595127、経度:113.873673、gpsbearing:22933.87ing:22.5369189 229}、{緯度:22.595107、経度:113.873709、GPSBearing:229}、{緯度:22.595105、経度:113.873715、GPSBearing:229}、{latitude:22.595092、gpsitud 7、経度:113.873925、gpsbearing:113}、{latitude:22.594878、経度:113.873748、gpsvearing:242}、{緯度:22.594688、長期:113.873477、gpsed:223}、223} 、gpsbearing:243}、{latitude:22.594415、経度:113.873053、gpsbearing:228}、{緯度:22.594323、経度:113.872878、gpsbearing:239}、緯度:22.594277、経度:113.872878、gpsbearing:242}、{latitude:22.594272、経度:113.872867、gpsbearing:242}、{緯度:22.594252、gpsiture itude:113.872594、gpsbearing:321}、{latitude:22.594751、経度:113.872271、gpsvearing:330}、{緯度:22.595176、経度:113.871885、gpsedbearing:327}、22756 PSBearing:326}、{Latitude:22.59617、経度:113.870976、GPSBEARING:293}、{緯度:22.595982、経度:113.870511、GPSBearing:228}、 itude:22.595922、経度:113.870391、gpsbearing:231}、{緯度:22.595921、経度:113.870391、gpsbearing:231}、{緯度:22.595879、gpsitud 113.870271、gpsbearing:255}、{latitude:22.59585、経度:113.870248、gpsbearing:255}、{latitude:22.595844、経度:113.870242、gpsbearing:253.838 :255}、{緯度:22.595833、経度:113.870228、GPSBearing:255}、{緯度:22.595801、経度:113.870155、GPSBearing:255}、 9577、経度:113.870088、gpsbearing:257}、{latitude:22.595768、経度:113.870055、gpsvearing:257}、{latitude:22.595792、lungitude:rungitude:113.870001、gpsearing:257 gpsbearing:311}、{latitude:22.596241、経度:113.869685、gpsbearing:340}、{緯度:22.597061、経度:113.86915、GPSBearing:327}、 {緯度:22.598526、経度:113.868166、GPSBearing:330}、{緯度:22.599516、経度:113.867496、gpsbearing:326}、{Latitude:22.600336、{latitude:113.86976、22280 、経度:113.866459、gpsbearing:325}、{latitude:22.601759、経度:113.865882、gpsvearing:319}、{緯度:22.602108、経度:113.865617、GPSBEARING:327} 、gpsbearing:322}、{latitude:22.604112、経度:113.863745、gpsbearing:318}、{緯度:22.60445、経度:113.863392、gpsbearing:314}、緯度:22.604844、経度:113.862974、gpsbearing:326}、{latitude:22.606299、経度:113.861679、gpsbearing:322}、{緯度:22.60691、gpsitud 、経度:113.860947、gpsbearing:336}、{latitude:22.608198、経度:113.860659、gpsvearing:338}、{latitude:22.608535、経度:113.86050922.82.22.6092 2、gpsbearing:332}、{latitude:22.609435、経度:113.860072、gpsbearing:338}、{latitude:22.61004、downest:113.859761、gpsbearing:334}、{latitude:22.610392、gpsbin {緯度:22.61047、経度:113.859458、gpsbearing:338}、{緯度:22.610558、経度:113.859366、gpsbearing:338}、{緯度:22.610873、gpsitud :113.859092、gpsbearing:331}、{latitude:22.611356、経度:113.858966、gpsvearing:340}、{緯度:22.611655、経度:113.858828、gps bearing:333}、{33.81205耳:334}、{緯度:22.612305、経度:113.858503、gpsbearing:335}、{latitude:22.612555、経度:113.858369、gpsbearing:335}、 itude:22.613101、経度:113.858116、gpsbearing:343}、{緯度:22.613474、経度:113.85796、gpsbearing:341}、{緯度:22.614135、latitud 113.856929、gpsbearing:326}、{latitude:22.616048、経度:113.85613、gpsvearing:322}、{latitude:22.617079、経度:113.855296、gpsedbearing:latitude:115.58882 ing:321}、{latitude:22.618689、経度:113.853904、gpsbearing:321}、{latitude:22.619046、経度:113.85358、gpsbearing:318}、 22.619668、経度:113.853046、gpsbearing:329}、{緯度:22.620248、経度:113.852555、gpsbearing:320}、{緯度:22.62042、経度:113.85239、gpsed:32121.2.265、 2、gpsbearing:321}、{latitude:22.621188、経度:113.851787、gpsbearing:337}、{latitude:22.62167、dostent:113.851444、gpsbearing:326}、{latitude:22.622059、gpsing:22.622059、 {緯度:22.622527、経度:113.850892、gpsbearing:330}、{緯度:22.622824、経度:113.850735、gpsbearing:340}、{緯度:22.623182、gpsitud経度:113.850243、GPSBEARING:333}、{Latitude:22.624357、経度:113.84992、GPSBearing:337}、{緯度:22.624972、経度:113.849677、gpshear:342256、{ gpsbearing:327}、{latitude:22.626399、経度:113.848871、gpsbearing:332}、{latitude:22.626952、strongitude:113.848533、gpsbeing:328}、{latitude:22.627567、giging }、{緯度:22.628267、経度:113.847538、GPSBearing:325}、{緯度:22.62907、経度:113.846803、GPSBearing:320}、{Latitude:22.629844、latitude:113.846088、 8、経度:113.845474、gpsbearing:320}、{latitude:22.631219、経度:113.844839、gpsvearing:320}、{緯度:22.631904、長期:113.844202、gpsed:317}ベアリング:323}、{緯度:22.63327、経度:113.84305、gpsbearing:319}、{latitude:22.63395、経度:113.84246、GPSBearing:321}、{緯度:22.634749、latitude:113.84187、gpshed:113.84187、 635693、経度:113.840785、gpsbearing:318}、{緯度:22.636531、経度:113.839701、gpsbearing:302}、{緯度:22.637421、経度:113.838755、latitude:320 37917、gpsbearing:318}、{latitude:22.639228、経度:113.837153、gpsbearing:318}、{latitude:22.639727、経度:113.836756、gpsbearing:325}、 330}、{緯度:22.640876、経度:113.836018、gpsbearing:332}、{latitude:22.641161、経度:113.835815、GPSBearing:324}、 .642177、経度:113.835227、gpsbearing:331}、{緯度:22.642515、経度:113.834992、GPSBearing:320}、{緯度:22.643021、正常性:113.834658、22.229 3.834292、gpsbearing:328}、{latitude:22.644073、経度:113.833943、gpsbearing:327}、{latitude:22.644542、経度:113.833564、gps bearing:lated:33.831耳:319}、{緯度:22.64629、経度:113.832075、gpsbearing:321}、{緯度:22.647176、経度:113.831203}、 4912、経度:113.829231、gpsbearing:316}、{latitude:22.649892、経度:113.828469、gpsbearing:319}、{緯度:22.650929、長さ:113.827758、gpsed:334.6527、 22、gpsbearing:346}、{latitude:22.653721、経度:113.827043、gpsbearing:0}、{緯度:22.65517、経度:113.827253、gpsbearing:14}、{latitude:22.656599、{113.8275緯度:22.658001、経度:113.827843、gpsbearing:10}、{latitude:22.659265、経度:113.828104、gpsbearing:10}、{緯度:22.660267、経度:113.828311、22.5.5.5.5.16 8523、gpsbearing:10}、{latitude:22.662587、経度:113.828707、gpsbearing:5}、{latitude:22.663792、経度:113.828852、gpsvearing:9}、{latitude:22.664849、 、{緯度:22.666112、経度:113.828927、gpsbearing:0}、{latitude:22.66696、経度:113.828904、gpsbearing:0}、{緯度:22.6682、経度:113.828904、latide 828892、gpsbearing:357}、{latitude:22.670029、経度:113.82891、gpsbearing:1}、{緯度:22.670366、経度:113.829053、gpsbearing:74}、{緯度:22.670421、 }、{緯度:22.670444、経度:113.829855、gpsbearing:93}、{latitude:22.670461、経度:113.830243、gpsbearing:77}、{latitude:22.670541、経大:113.830399、gpsedsbeas 、経度:113.83034、GPSBearing:349}、{Latitude:22.671146、経度:113.830415、GPSBearing:38}、{Latitude:22.671149、経度:113.830554、GPSBearing:143}、{latitude:22.67147、 3}、{緯度:22.671211、経度:113.830701、gpsbearing:59}、{latitude:22.671229、経度:113.830758、gpsbearing:54}、{latitude:22.671152、gpsituden itude:113.830789、gpsbearing:148}、{latitude:22.671081、経度:113.830807、gpsbearing:173}、{latitude:22.671056、経度:113.830823、gpsbearing:176} 、{緯度:22.671138、経度:113.830843、gpsbearing:199}、{緯度:22.67108、経度:113.830825、GPSBearing:204}、{緯度:22.671102、経度:113.830873、22.83.10 966、gpsbearing:200}、{latitude:22.670681、経度:113.830952、gpsbearing:146}、{緯度:22.670178、経度:113.830837、gpsbearing:182}、緯度:22.671662、経度:113.830848、GPSBearing:63}、{緯度:22.671662、経度:113.830841、GPSBearing:55}、{緯度:22.671555、22.671555、 30897、gpsbearing:11}、{latitude:22.671486、経度:113.830877、gpsbearing:11}、{緯度:22.671422、経度:113.830844、gpsbearing:11}、{latitude:22.6714、113.830852 .671388、経度:113.830872、gpsbearing:11}、{latitude:22.671458、経度:113.830874、gpsbearing:11}、{latitude:22.671463、長所:113.830894、gpsed: gpsbearing:11}、{latitude:22.671493、経度:113.830812、gpsbearing:11}、{latitude:22.67146、経度:113.830784、GPSBearing:11}、 389、経度:113.830789、gpsbearing:11}、{latitude:22.671289、経度:113.830735、gpsed:11}、{緯度:22.671227、経度:113.830663、gpsitud:11 ing:11}、{緯度:22.671251、経度:113.830766、gpsbearing:11}、{latitude:22.671234、経度:113.830775、gpsbearing:11}、{latitude:22.67121、latitude: :113.83051、gpsbearing:11}、{latitude:22.671142、経度:113.830573、gpsbearing:11}、{latitude:22.670879、経度:113.830429、gpsbearing:348}、{緯度:22.70907、gpsitude }、{緯度:22.670978、経度:113.830479、gpsbearing:224}、{latitude:22.671004、経度:113.830568、gpsbearing:224}、{緯度:22.670994、gpsitude:153 itude:113.830757、gpsbearing:161}、{latitude:22.671047、経度:113.830795、gpsbearing:166}、{latitude:22.671073、経度:113.830817、gpsbearing:169 }、{緯度:22.671058、経度:113.830814、gpsbearing:169}、{latitude:22.671086、経度:113.830899、gpsbearing:169}、{緯度:22.671089、gpsitud 3.830947、gpsbearing:169}、{latitude:22.671631、経度:113.831154、gpsbearing:158}、{緯度:22.6716、経度:113.831148、gpsvearing:145}、{緯度:22.7152、gims {緯度:22.671486、経度:113.831509、gpsbearing:77}、{緯度:22.67135、経度:113.831558、gpsbearing:96}、{緯度:22.671349、gupsit itude:113.831489、gpsbearing:95}、{latitude:22.671388、経度:113.831372、gpseding:95}、{緯度:22.671386、経度:113.831333、gpsed:95}ベアリング:95}、{緯度:22.671292、経度:113.831228、gpsbearing:95}、{latitude:22.671025、経度:113.831196、gpsbearing:149}、{緯度:22.671026、長所:113.831183、{1831183、 71076、経度:113.83113、gpsbearing:180}、{latitude:22.671119、経度:113.831024、gpseding:180}、{緯度:22.67117、経度:113.830974、gps bearing:1833.833.833.833.833.8 180}、{緯度:22.671233、経度:113.830912、gpsbearing:180}、{緯度:22.671269、経度:113.830879、GPSBearing:180}、{latitude:22.671215、gpsitud 、経度:113.830907、gpsbearing:180}、{latitude:22.671278、経度:113.830979、gps bearing:180}、{緯度:22.671498、経度:113.831101、gpsheard:1805:12.7170、22.705 ing:43}、{緯度:22.671713、経度:113.831276、gpsbearing:297}、{latitude:22.67165、経度:113.831221、gpsbearing:298}、 671463、経度:113.831156、gpsbearing:326}、{緯度:22.671413、経度:113.831106、gpsbearing:339}、{緯度:22.671225、経度:113.831049、gpsitude:353.2.2.2.2.2.2.2.2.2.2.2 30936、gpsbearing:99}、{latitude:22.670841、経度:113.83088、gpsbearing:225}、{緯度:22.671066、経度:113.830904、gpsbearing:231}、{latitude:{logitive:{logity:{loged :22.671189、経度:113.83107、gpsbearing:22}、{latitude:22.671145、経度:113.831111、gpsvearing:29}、{latitude:22.671133、rowthitude:113.830951、gpshearing:34}ベアリング:29}、{緯度:22.671209、経度:113.830802、gpsbearing:348}、{latitude:22.671145、経度:113.830834、GPSBearing:348}、 71034、経度:113.830765、gpsbearing:348}、{latitude:22.671065、経度:113.830838、gpsvearing:348}、{latitude:22.671175、ungitured:ruged:gssbearing:348ティー: gpsbearing:348}、{latitude:22.671248、経度:113.830893、gpsbearing:348}、{緯度:22.671134、経度:113.83089、gpsbearing:348}、 :22.671283、経度:113.831064、gpsbearing:348}、{latitude:22.671341、経度:113.831058、gpsbearing:348}]、
   色: "#7b7af8",
   幅: 5,
   //境界線の幅: 2,
   境界線の色: '#7b7af8',
   level: 'abovebuildings', //重複関係 arrowLine: true //矢印付きの線}],
  ポリゴン: [],
  mapSettings: { //マップ設定を均一に設定する skew: 0, //傾斜角度 rotate: 0, //回転角度 showScale: false, //スケールを表示する。ツールはまだサポートしていません subKey: '', //パーソナライズされたマップに使用されるキー
   layerStyle: 1, // パーソナライズされたマップ構成スタイル
   enableZoom: true, //ズーム enableScroll: true, //ドラッグ enableRotate: false, //回転 showCompass: false, //コンパス enable3D: false, //3D建物を表示(ツールではまだサポートされていません)
   enableOverlooking: false, //オーバールック enableSatellite: false, //衛星画像 enableTraffic: false, //リアルタイムの交通状況},
  再生インデックス: 0,
  表示メッセージ: "",
  ステップ: 1、
  期間: 100,
  最大持続時間: 2000、
  最小持続時間: 500、
  isPause: 偽
 },
 trackPlay: function () { //トラックインターフェース const that = this;
  const ポイント = this.data.polylineSettings[0].points;
  that.setData({
   'マーカー[0].緯度': ポイント[0].緯度、
   'マーカー[0].経度': ポイント[0].経度、
   マップの中心: ポイント[0],
  }、 関数 () {
   that.mapCtx.translateMarker({
    マーカーID: 1,
    自動回転: true、
    回転移動: true、
    期間: 1000、
    目的地: ポイント[0]
   })
   that.beginTrack() //トラック再生})
 },
 beginTrack: function () { //トラック再生 const that = this;
  index = that.data.playIndex === 0 ? 0 とします: that.data.playIndex;
  ポイントをthis.data.polylineSettings[0].pointsとします。
  継続時間を that.data.duration とします。

  //これを再生します。
  that.data.trackTimer = setInterval(関数() {
   const point = points[インデックス];
   that.data.lastPoint = ポイント;
   //console.log("最後のポイント:",that.data.lastPoint);
   // console.log(point,that.getCurrentTime());
   that.mapCtx.translateMarker({
    マーカーID: 1,
    自動回転: false、
    回転移動: true、
    期間: 期間、
    目的地: ポイント、
    回転: point.gpsBearing、
    失敗: 関数 (res) {
     コンソールログ(res);
    },
    成功: 関数() {
     that.setData({
      再生インデックス: インデックス、
      表示メッセージ: point.latitude + "," + point.longitude + "," + point.gpsBearing + "," + points.length + "," + index
     })
     that.mapCtx.getRegion({
      成功: 関数 (e) {
       if (that.checkOutRegion(ポイント、e.southwest、e.northeast)) {
        that.setData({
         mapCenter: ポイント、
        })
       }
      }
     });
     (インデックス + 1 >= ポイント.長さ)の場合{
      that.stopTrack()
     }
     インデックス++;
    }
   })

  }、 間隔);
 },
 stopTrack: function () { //再生を終了 const that = this;
  ポイントをthis.data.polylineSettings[0].pointsとします。
  that.setData({
   再生インデックス: 0,
   'マーカー[0].緯度': ポイント[0].緯度、
   'マーカー[0].経度': ポイント[0].経度、
  });
  トラックタイマーの間隔をクリアします。
 },
 checkOutRegion: 関数 (ポイント、南西、北東) {
  // console.log(ポイント、南西、北東);
  (地点の経度 < 南西経度 || 地点の緯度 < 南西緯度){
   true を返します。
  }
  (ポイントの経度 > 北東の経度 || ポイントの緯度 > 北東の緯度){
   true を返します。
  }
  false を返します。
 },
 トラッカー一時停止: 関数 () {
  一時停止の場合
   トラックタイマーの間隔をクリアします。
   this.setData({
    一時停止: true
   });
  }

 },
 トラッカープレイ: 関数() {
  if (this.data.isPause) {
   このメソッドは、
   this.setData({
    isPause: 偽
   });
  }

 },
 /**
  * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {
  this.mapCtx = wx.createMapContext('mymap');
  this.trackPlay();
 },
})

車両の位置を追うためにポイントを移動するたびに地図の中心点を切り替えると、地図がガタガタした感じになります。そこで、可視化エリアの判断を行い、車両が可視化エリアから外れた場合は地図の中心点を切り替えることにしました。

ここでは、translateMarker 関数を使用して、車がスムーズに切り替わるように車の偏向角度を切り替えます。車の画像のデフォルトの方向は上向き、つまり北方向に相当することに注意してください。

現在はトラック再生機能が実装されており、今後早送りや早戻し機能も追加していく予定です。

実装プロセス中に、当面解決できないいくつかの小さなプログラムバグに遭遇しました。まずはそれらを記録して、WeChat の更新を待ちます。

1. 軌跡描画ラインのborderWidth設定により実機上で軌跡が表示できなくなります。

2. マップレベルの切り替えによりトラックが見えなくなります。詳細については、https://developers.weixin.qq.com/community/develop/doc/000e8eed2fc20884237a791105b800 を参照してください。

上記の2つの問題の解決策はまだ見つかっていません。解決策をお持ちの方は、メッセージを送って教えてください。

これで、WeChatミニプログラムトラック再生の実装と遭遇した落とし穴の詳細な説明に関するこの記事は終了です。より関連性の高いミニプログラムトラック再生コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットでトラック再生を実装するためのサンプルコード

<<:  MySQL の異常なエラー ERROR: 2002 を解決する方法

>>:  Linuxでスクリーンショットを撮って編集するための最高のツール

推薦する

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

Vue2 における 12 種類のコンポーネント通信

目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...

Linux のユーザーとグループ管理によく使われるコマンドの概要

この記事では、Linux のユーザーとグループの管理によく使用されるコマンドをまとめます。ご参考まで...

Vue-Routerのルート設定の詳しい説明

目次導入ルート内のオブジェクト属性パス: 文字列コンポーネント: コンポーネント | () =>...

MySQL ストアド プロシージャで case ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...

MySQL 5.7 解凍版のインストール、アンインストール、および文字化けしたコードの問題のグラフィック解決

1. 解凍版のインストール(1)圧縮パッケージをダウンロードし、ディスクの場所に解凍します。圧縮パッ...

Alibaba Cloud Centos7のインストールとSVNの設定

1. SVNサーバーをインストールする yum でサブバージョンをインストール2. SVNバージョン...

原因不明のMySqlサービス消失の解決策

原因不明のMySqlサービス消失の解決策先ほど、MySQL-Front が突然 MySql を開けな...

廃止された Docker は Podman に置き換えられますか?

Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法

VMware ツールは VMware の使用に非常に便利です。そのため、VMware ツールをインス...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...