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でスクリーンショットを撮って編集するための最高のツール

推薦する

Dockerの一般的なコマンドとヒントのまとめ

インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...

CentOS で MySQL 5.1 を 5.5.36 にアップグレードする

CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...

Linux システムでの vim プラグインのインストールの概要

目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

JS でシンプルな画像カルーセル効果を実現

この記事では、シンプルな画像カルーセル効果を実現するためのJSの具体的なコードを参考までに紹介します...

Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

TypeScript とは何ですか?

目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...

Nginx+FastDFSでイメージサーバーを構築

設置環境セントス環境依存性: yum -y gccをインストールします yum インストール -y ...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

一般的なDocker Composeコマンドの詳細な説明

1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...

一般的な Dockerfile コマンドの使用方法の紹介

目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...