Beispiel für den Mehrpunkt-Routenplanungsprozess des WeChat-Applets Amap – detaillierte Erläuterung

var Konfiguration = {
 key:'Bitte tragen Sie hier den gewünschten Schlüssel ein'
}
module.exports.Config = Konfiguration;

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');

<scroll-view scroll-x class="bg-white nav text-center">
 <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
 {{Methode[index]}}
 </Ansicht>
</scroll-ansicht>
<Klasse anzeigen="Karte">
 <view bindtap='getFormAddress'>
 <Ansichtsklasse="cu-form-group">
 <view class="title">Abfahrtsort</view>
 <input placeholder="Abfahrtsort" type="text" name="" bindinput="" value='{{markers[0].name}}' />
 </Ansicht>
 </Ansicht>
 <view bindtap='getToAddress'>
 <Ansichtsklasse="cu-form-group">
 <view class="title">Ziel</view>
 <input placeholder="Ziel" type="text" name="" bindinput="" value='{{markers[1].name}}' />
 </Ansicht>
 </Ansicht>
​
 <Ansichtsklasse="flex" wx:if="{{TabCur==0||TabCur==1}}">
 <button class="cu-btn bg-blue lg" bindtap = 'getSure'>OK</button>
 </Ansicht>
​
</Ansicht>
<Ansicht>
 <Ansichtsklasse="map_box" wx:if="{{TabCur==0}}">
 <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" marker="{{markers}}" polyline="{{polyline}}"></map>
 </Ansicht>
 <Ansichtsklasse="text_box" wx:if='{{TabCur==0}}'>
 <view class="text">{{Entfernung}}</view>
 <view class="text">{{Kosten}}</view>
 <view class="detail_button" bindtouchstart="goDetail" wx:if="{{state==1}}">Details</view>
 </Ansicht>
</Ansicht>

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Seite({ 
 /**
 * Ausgangsdaten der Seite */
 Daten: {
 Markierungen: [{
 Symbolpfad: "../../img/mapicon_navi_s.png",
 ID: 0,
 Breitengrad: 39.989643,
 Längengrad: 116.481028,
 Breite: 23,
 Höhe: 33
 },{
 Symbolpfad: "../../img/mapicon_navi_e.png",
 ID: 0,
 Breitengrad: 39.90816,
 Längengrad: 116.434446,
 Breite: 24,
 Höhe: 34
 }],
 Distanz: '',
 kosten: '',
 Zustand: 0,
 Methode: ['fahren', 'Bus', 'Fahrrad', 'gehen'],
 Index: 0,
 TabCur:0,
 Polylinie: [],
 Transite: []
 }, 
 /**
 * Lebenszyklusfunktion - auf Seitenladen warten*/
 beim Laden: Funktion (Optionen) {
 var das = dies;
 wx.showLoading({
 Titel: "Positionierung",
 Maske: wahr
 })
 wx.getLocation({
 Typ: 'gcj02',
 Höhe: true, //Hochpräzise Positionierung erfolgreich: function(res) {
 konsole.info(res);
 var Breitengrad = Res.Breitengrad
 var Längengrad = res.Längengrad
 var Geschwindigkeit = Res.Geschwindigkeit
 var Genauigkeit = Res.Genauigkeit
 dass.setData({
 Markierungen: [{
 Name: 'Aktueller Standort',
 Breitengrad: Breitengrad,
 Längengrad: Längengrad
 }, {
 Name: 'Wohin gehst du?',
 Breitengrad: '',
 Längengrad: ''
 }]
 })
 },
 fehlgeschlagen: Funktion() {
 wx.showToast({
 Titel: "Positionierung fehlgeschlagen",
 Symbol: „keine“
 })
 }, 
 komplett: Funktion() {
 wx.hideLoading()
 }
 })
 },
 //Selektoränderungsfunktion tabSelect(e) {
 dies.setData({
 TabCur: e.currentTarget.dataset.id,
 scrollLeft: (e.currentTarget.dataset.id - 1) * 60
 })
},
//Abfahrtsort abrufengetFormAddress: function() {
 var das = dies;
 wx.Wählen Sie den Standort({
 Erfolg: Funktion (Res) {
 var name = res.name
 var Adresse = res.Adresse
 var Breitengrad = Res.Breitengrad
 var Längengrad = res.Längengrad
 var marksName = "Markierungen[" + 0 + "].name";
 var marksLatitude = "Markierungen[" + 0 + "].latitude";
 var markslongitude = "Markierungen[" + 0 + "].longitude";
 var marksiconPath = "Markierungen[" + 0 + "].iconPath";
 dass.setData({
 [markesName]: Name,
 [markesLatitude]: Breitengrad,
 [markeslongitude]: Längengrad,
 [markesiconPath]: "../../img/mapicon_navi_s.png"
 })
 },
 fehlgeschlagen: Funktion() {
 wx.showToast({
 Titel: 'Positionierung fehlgeschlagen',
 Symbol: „keine“
 })
 },
 komplett: Funktion() {
 //Positionierungsinformationen ausblenden Fortschritt wx.hideLoading()
 }
 })
 }, 
//Ziel abrufen getToAddress: function() {
 var das = dies;
 wx.Wählen Sie den Standort({
 Erfolg: Funktion (Res) {
 konsole.log(res);
 var name = res.name
 var Adresse = Res.Adresse
 var Breitengrad = Res.Breitengrad
 var Längengrad = res.Längengrad
 var marksName = "Markierungen[" + 1 + "].name";
 var marksLatitude = "Markierungen[" + 1 + "].latitude";
 var markslongitude = "Markierungen[" + 1 + "].longitude";
 var marksiconPath = "Markierungen[" + 1 + "].iconPath";
 dass.setData({
 [markesName]: Name,
 [markesLatitude]: Breitengrad,
 [markeslongitude]: Längengrad,
 [markesiconPath]: "../../img/mapicon_navi_e.png"
 })
 },
 fehlgeschlagen: Funktion() {
 wx.showToast({
 Titel: 'Positionierung fehlgeschlagen',
 Symbol: „keine“
 })
 },
 komplett: Funktion() {
 //Positionierungsinformationen ausblenden Fortschritt wx.hideLoading()
 }
 })
 },
 /**
 * Sicher*/
 getSure: Funktion() {
 var das = dies;
 var Herkunft = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude; //Abfahrtspunkt var Ziel = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude; //Ziel var TabCur=this.data.TabCur;
app.origin = Herkunft;
app.destination = Ziel;
var Schlüssel = Konfiguration.Konfigurationsschlüssel;
var myAmapFun = neue amapFile.AMapWX({
 Schlüssel: Schlüssel
 });
 wenn(TabCur==0){
  myAmapFun.getDrivingRoute({//Fahrtroute abrufen Ursprung: Ursprung,
  Ziel: Ziel,
  Erfolg: Funktion (Daten) {
  var Punkte = [];
  wenn (Datenpfade && Datenpfade[0] && Datenpfade[0].Schritte) {
  var Schritte = Daten.Pfade[0].Schritte;
  für (var i = 0; i < Schritte.Länge; i++) {
  var poLen = Schritte[i].polyline.split(';');
  für (var j = 0; j < poLen.length; j++) {
  Punkte.push({
  Längengrad: parseFloat(poLen[j].split(',')[0]),
  Breitengrad: parseFloat(poLen[j].split(',')[1])
  })
  }
  }
  }
  that.setData({//Zeichne die Route auf der Karte status: 1,
  Polylinie: [{
  Punkte: Punkte,
  Farbe: "#0091ff",
  Breite: 6
  }]
  });
  wenn (Daten.Pfade[0] && Daten.Pfade[0].Entfernung) {
  dass.setData({
  Entfernung: data.paths[0].distance + 'Meter'
  });
  }
  wenn (Daten.Taxikosten) {
  dass.setData({
  Kosten: „Taxi“ + parseInt(data.taxi_cost) + „Yuan“
  });
  }
  }
 })
 }
 },
/**
 * Detailseite */
goDetail: Funktion() {
  var TabCur = this.data.TabCur;
  wenn(TabCur==0){
  wx.navigateTo({
  URL: „../detail/detail“
  })
 }
 },
})

.flex-Stil{
 Anzeige: -webkit-box;
 Anzeige: -webkit-flex;
 Anzeige: Flex;
 }
 .flex-item{
 Höhe: 35px;
 Zeilenhöhe: 35px;
 Textausrichtung: zentriert;
 -WebKit-Box-Flex: 1;
 -webkit-flex: 1;
 Flexion: 1
 }
 .flex-item.aktiv{
 Farbe: #0091ff;
 }
 .Kartentitel{
 Position: absolut;
 oben: 10px;
 unten: 110px;
 links: 0px;
 rechts: 0px;
 }
 .map_btn{
 Position: absolut;
 oben: 150px;
 unten: 220px;
 links: 0px;
 rechts: 0px;
 }
 .map_box{
 Position: absolut;
 oben: 187px;
 unten: 70px;
 links: 0px;
 rechts: 0px;
 }
 #navi_map{
 Breite: 100 %;
 Höhe: 100%;
 }
 .text_box{
 
 Position: absolut;
 Höhe: 70px;
 unten: 0px;
 links: 0px;
 rechts: 0px;
 }
 .text_box .text{
 Rand: 15px;
 }

<view class="text_box" wx:for="{{Schritte}}" wx:for-item="i" wx:key="j">
 {{i.Anweisung}}
</Ansicht>

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Seite({
 Daten: {
 Schritte: {}
 },
 beim Laden: Funktion () {
 var das = dies;
 var Schlüssel = Konfiguration.Konfigurationsschlüssel;
 var myAmapFun = neue amapFile.AMapWX({ Schlüssel: Schlüssel });
 myAmapFun.getDrivingRoute({
 Herkunft: app.origin,
 Ziel: app.destination,
 Erfolg: Funktion (Daten) {
 wenn (Datenpfade && Datenpfade[0] && Datenpfade[0].Schritte) {
 dass.setData({
 Schritte: data.paths[0].steps
 });
 }
 },
 fehlgeschlagen: Funktion (Info) {
 }
 })
 }
})

Seite{

}
.text_box{
 Rand: 0 15 px;
 Polsterung: 15px 0;
 Rahmen unten: 1px durchgezogen #c3c3c3;
 Schriftgröße: 13px;
}
.text_box .text_item{Anzeige: Inline-Block;Zeilenhöhe: 8px;}