WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

電話

Amap API を呼び出す方法は?

Amap が https://lbs.amap.com/api/wx/summary/ で提供している公式オープンドキュメントは非常に詳細です。

最初のステップはAmap開発者として登録することです

ステップ2: コンソールでアプリケーションを作成する

右上隅のコントロールプラットフォームをクリックしてアプリケーションを作成します

アプリケーションバインディングサービスを作成するときは、WeChatアプレットを選択することを忘れないでください。同時に、https://lbs.amap.com/api/wx/gettingstartedから開発キットをダウンロードしてください。

3 番目のステップは、WeChat パブリック プラットフォームにログインし、開発設定で Amap ドメイン名を構成することです。

https://restapi.amap.com

ステップ 4. WeChat 開発者ツールを開き、WeChat アプレットを開いて、プロジェクトに libs フォルダーを作成します。

Amap公式サイトからダウンロードした開発パッケージを解凍し、amap-wx.jsファイルをlibsフォルダに配置します。

同時にconfig.jsを作成します

var config = {
 キー:'申請したキーをここに入力してください'
}
モジュール.exports.Config = config;

他のインターフェースjsパーツでGaode APIを呼び出すことができます

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

2点間のナビゲーション

これは、マルチポイントルート計画を実現するための基礎であり、非常に重要です。 ! !

成果を達成する

運転を例に挙げてみましょう。注: インターフェースはcoloruiを使用しています

wxml 部分:

<スクロールビュー スクロールx クラス="bg-white nav テキストセンター">
 <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
 {{メソッド[インデックス]}}
 </ビュー>
</スクロールビュー>
<view class="map">
 <ビューbindtap='getFormAddress'>
 <view class="cu-form-group">
 <view class="title">出発地</view>
 <input placeholder="出発地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
 </ビュー>
 </ビュー>
 <ビューbindtap='getToAddress'>
 <view class="cu-form-group">
 <view class="title">目的地</view>
 <input placeholder="destination" type="text" name="" bindinput="" value='{{markers[1].name}}' />
 </ビュー>
 </ビュー>
​
 <view class="flex" wx:if="{{TabCur==0||TabCur==1}}">
 <button class="cu-btn bg-blue lg" bindtap = 'getSure'>OK</button>
 </ビュー>
​
</ビュー>
<表示>
 <view class="map_box" wx:if="{{TabCur==0}}">
 <map id="navi_map" 経度="{{markers[0].longitude}}" 緯度="{{markers[0].latitude}}" スケール="12" マーカー="{{markers}}" ポリライン="{{polyline}}"></map>
 </ビュー>
 <view class="text_box" wx:if='{{TabCur==0}}'>
 <view class="text">{{距離}}</view>
 <view class="text">{{コスト}}</view>
 <view class="detail_button" bindtouchstart="goDetail" wx:if="{{state==1}}">詳細</​​view>
 </ビュー>
</ビュー>

js部分:

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const アプリ = getApp()
ページ({ 
 /**
 * ページの初期データ */
 データ: {
 マーカー: [{
 アイコンパス: "../../img/mapicon_navi_s.png",
 id: 0,
 緯度: 39.989643,
 経度: 116.481028、
 幅: 23,
 高さ: 33
 },{
 アイコンパス: "../../img/mapicon_navi_e.png",
 id: 0,
 緯度: 39.90816,
 経度: 116.434446、
 幅: 24,
 高さ: 34
 }],
 距離: ''、
 料金: ''、
 状態: 0,
 方法:['ドライブ'、'バス'、'自転車'、'徒歩']、
 インデックス:0,
 タブカーソル:0,
 ポリライン: [],
 トランジット: []
 }, 
 /**
 * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数(オプション) {
 var that = this;
 wx.showLoading({
 タイトル: 「ポジショニング」、
 マスク: 真
 })
 wx.getLocation({
 タイプ: 'gcj02',
 altitude: true, //高精度測位成功: function(res) {
 コンソール.info(res);
 var 緯度 = res.緯度
 var 経度 = res.経度
 var 速度 = res.speed
 var 精度 = res.精度
 that.setData({
 マーカー: [{
 名前: '現在の場所',
 緯度: 緯度、
 経度: 経度
 }, {
 名前: 「どこへ行くの?」
 緯度: ''、
 経度: ''
 }]
 })
 },
 失敗: 関数() {
 wx.showToast({
 タイトル: 「位置決めに失敗しました」
 アイコン:「なし」
 })
 }, 
 完了: 関数() {
 wx.hideLoading()
 }
 })
 },
 //セレクタ変更関数tabSelect(e) {
 this.setData({
 TabCur: e.currentTarget.dataset.id、
 スクロール左: (e.currentTarget.dataset.id - 1) * 60
 })
},
//出発地を取得するgetFormAddress: function() {
 var that = this;
 wx.chooseLocation({
 成功: function(res) {
 var 名 = res.name
 var アドレス = res.address
 var 緯度 = res.緯度
 var 経度 = res.経度
 var marksName = "マーカー[" + 0 + "].name";
 var marksLatitude = "markers[" + 0 + "].latitude";
 var markslongitude = "markers[" + 0 + "].longitude";
 var marksiconPath = "マーカー[" + 0 + "].iconPath";
 that.setData({
 [markesName]: 名前、
 [markesLatitude]: 緯度、
 [markeslongitude]: 経度、
 [markesiconPath]: "../../img/mapicon_navi_s.png"
 })
 },
 失敗: 関数() {
 wx.showToast({
 タイトル: 「位置決めに失敗しました」
 アイコン:「なし」
 })
 },
 完了: 関数() {
 //位置情報の進行状況を非表示にする wx.hideLoading()
 }
 })
 }, 
//宛先を取得する getToAddress: function() {
 var that = this;
 wx.chooseLocation({
 成功: function(res) {
 コンソールログ(res);
 var 名 = res.name
 var アドレス = res.address
 var 緯度 = res.緯度
 var 経度 = res.経度
 var marksName = "マーカー[" + 1 + "].name";
 var marksLatitude = "markers[" + 1 + "].latitude";
 var markslongitude = "markers[" + 1 + "].longitude";
 var marksiconPath = "マーカー[" + 1 + "].iconPath";
 that.setData({
 [markesName]: 名前、
 [markesLatitude]: 緯度、
 [markeslongitude]: 経度、
 [markesiconPath]: "../../img/mapicon_navi_e.png"
 })
 },
 失敗: 関数() {
 wx.showToast({
 タイトル: 「位置決めに失敗しました」
 アイコン:「なし」
 })
 },
 完了: 関数() {
 //位置情報の進行状況を非表示にする wx.hideLoading()
 }
 })
 },
 /**
 * もちろん*/
 getSure: 関数() {
 var that = this;
 var origin = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude; //出発地 var destination = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude; //目的地 var TabCur=this.data.TabCur;
アプリの origin を .origin に変更します。
app.destination = 宛先;
var キー = config.Config.key;
var myAmapFun = 新しいamapFile.AMapWX({
 キー: キー
 });
 タブカーソル==0の場合{
  myAmapFun.getDrivingRoute({//運転ルートを取得 origin: origin,
  目的地: 目的地、
  成功: 関数(データ) {
  var ポイント = [];
  (data.paths && data.paths[0] && data.paths[0].steps)の場合{
  var ステップ = data.paths[0].steps;
  (var i = 0; i < steps.length; i++) の場合 {
  var poLen = steps[i].polyline.split(';');
  (var j = 0; j < poLen.length; j++) の場合 {
  ポイント.push({
  経度: parseFloat(poLen[j].split(',')[0]),
  緯度: parseFloat(poLen[j].split(',')[1])
  })
  }
  }
  }
  that.setData({//地図上にルートを描画する state: 1,
  ポリライン: [{
  ポイント: ポイント、
  色: "#0091ff",
  幅: 6
  }]
  });
  if (data.paths[0] && data.paths[0].distance) {
  that.setData({
  距離: data.paths[0].distance + 'メートル'
  });
  }
  (data.taxi_cost) の場合 {
  that.setData({
  費用: 'タクシー' + parseInt(data.taxi_cost) + '元'
  });
  }
  }
 })
 }
 },
/**
 * 詳細ページ */
詳細: 関数() {
  var TabCur = this.data.TabCur;
  タブカーソル==0の場合{
  wx.navigateTo({
  url: '../詳細/詳細'
  })
 }
 },
})

wxss部分:

.flex-style{
 ディスプレイ: -webkit-box;
 ディスプレイ: -webkit-flex;
 ディスプレイ: フレックス;
 }
 .flex-item{
 高さ: 35px;
 行の高さ: 35px;
 テキスト配置: 中央;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 フレックス: 1
 }
 .flex-item.active{
 色:#0091ff;
 }
 .map_title{
 位置:絶対;
 上: 10px;
 下部: 110px;
 左: 0px;
 右: 0px;
 }
 .map_btn{
 位置:絶対;
 上: 150px;
 下部: 220px;
 左: 0px;
 右: 0px;
 }
 .map_box{
 位置:絶対;
 上: 187px;
 下: 70px;
 左: 0px;
 右: 0px;
 }
 #ナビマップ{
 幅: 100%;
 高さ: 100%;
 }
 .テキストボックス{
 
 位置:絶対;
 高さ: 70px;
 下: 0px;
 左: 0px;
 右: 0px;
 }
 .テキストボックス .テキスト{
 マージン: 15px;
 }

詳細ページのセクション:

HTML部分:

<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
 {{i.命令}}
</ビュー>

js部分:

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const アプリ = getApp()
ページ({
 データ: {
 手順: {}
 },
 onLoad: 関数 () {
 var that = this;
 var キー = config.Config.key;
 var myAmapFun = new amapFile.AMapWX({ key: key });
 myAmapFun.getDrivingRoute({
 オリジン: app.origin,
 宛先: app.destination、
 成功: 関数 (データ) {
 (data.paths && data.paths[0] && data.paths[0].steps)の場合{
 that.setData({
 ステップ: data.paths[0].steps
 });
 }
 },
 失敗: 関数 (情報) {
 }
 })
 }
})

wxss部分:

ページ{

}
.テキストボックス{
 マージン: 0 15px;
 パディング: 15px 0;
 下境界線: 1px 実線 #c3c3c3;
 フォントサイズ: 13px;
}
.text_box .text_item{display:inline-block;line-height: 8px;}

その他の公共交通機関、自転車、徒歩も運転と同様です。Amap のオープン ドキュメントを確認すると、これらについて詳しく知ることができます。

私の設計では、バスは 1 つの都市だけでなく、さまざまな都市のバス路線を表示できます。実装は非常に簡単です。セレクター city パラメータがインターフェイスに追加され、city に渡されてさまざまな都市のバス路線が表示されます。

マルチポイントルート計画

導入効果:出発地を選択したり、さまざまな観光スポットを選択したり、さまざまな移動方法に基づいて最短経路を提示したりできます。

実装のアイデア:

  • 周辺の観光スポットやその他の関連情報を入手
  • ユーザーが追加した観光スポット情報を次のページに渡して計算する
  • すべての可能なルートを取得し、各ルートの長さを計算して最短ルートを見つけます

落とし穴

  • 当初は深さ優先探索アルゴリズムを使用して実装する予定でしたが、実際の地図では、2 つのポイント間にはほぼ常にパスがあり、抽象的な数学の問題とは異なることがわかりました。最終的に、完全な順列法を使用してすべてのルートを取得しました
  • 完全な配置のプロセスでは、関数を再帰的に呼び出す必要があり、パラメータの受け渡しの問題が発生します。パラメータ付きのカスタム関数は、ページの外部に記述する必要があります。ページ内に記述すると、関数を呼び出すさまざまな方法を試しましたが、エラーが発生します。
  • Gaode API を使用してパス関数を取得した後、各ルート セグメントの長さを計算することはできません。最終的に、関数呼び出し中は、ルート距離を格納する配列が一時的に保存されるだけで、関数呼び出し後にその配列を使用して距離を計算することはできないことがわかりました。最終的には、関数呼び出し中に各ルートの長さを計算して比較し、最後に this.setData メソッドを使用して最終的なルートをインターフェイスに表示しました。

具体的な実装

  • 出発地と移動方法を取得し、それらをグローバル変数に割り当てて、 app.origin = originなどの次のインターフェースに渡します。
  • getPoiAround関数を使用して、周辺の観光スポット情報を取得します。 querykeywords観光スポットに固定設定すると、返された最初の 20 件の観光スポット情報がインターフェイスに表示されます。
  • ユーザーが選択した観光スポット情報は配列に保存され、次のインターフェースに渡されて計算されます。
  • 完全な順列を使用して、すべての可能なルートを取得し、重複を削除します。
  • 各ルートの長さを計算し、最短ルートを見つけてインターフェースに表示します。

注: 各ルートの距離を取得する方法と、2 つの場所間の異なる移動モードのルートを取得する方法は、上記の 2 点間のナビゲーション部分にあります。複数のポイント間のルート ナビゲーションは、実際には複数のポイント間のルート ナビゲーションを接続します。まず、上記の 2 つのポイント間の異なる移動モードのナビゲーションを実装し、次に小さな変更を加えて、完全な順列アルゴリズムとサイズ比較アルゴリズムを追加して実装します。ここではソース コードを投稿しません。

私のアイデアがあなたにインスピレーションを与えてくれることを願っています〜

最適化可能な部品

  • querykeywordsを設定すると、ユーザーはアウトドア、エンターテイメント、食べ物、ホテルなどのさまざまなタグを選択できるようになります。
  • ユーザーがさまざまなラベルの場所を選択し、配列に保存して、移動の最短経路を計算できるようにします。
  • 最終表示インターフェースに地図を表示することで、ユーザーはさまざまな場所間の位置と距離情報をより直感的に確認できるようになります。
  • 最高のナビゲーション形式: リアルタイムナビゲーション。

注: 上記4点はとりあえず思いついた部分です。自分で穴を掘るような感じです。埋めたらここに実装方法を書いていきます。

これで、Amap WeChatミニプログラムのマルチポイントルート計画プロセスの例の詳細な説明に関するこの記事は終了です。より関連性の高いAmapマルチポイントルート計画コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Amap を使用した React 実装例 (react-amap)
  • Java環境でAmap APIを使用する方法
  • Android Gaode マップマーカーカスタムポップアップウィンドウ
  • SpringBoot と Mybatis を統合して Amap ポジショニングを実現し、データベースにデータを保存する詳細な手順
  • フロントエンドVueでAmapを使用する方法
  • WeChatアプレットはAmap APIに基づいて天気コンポーネント(動的効果)を実装します
  • vue+Amapは地図検索とクリック位置決め操作を実現します
  • React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

<<:  Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

>>:  MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

推薦する

Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...

テーブル設定の背景画像が100%表示されない解決策

開発中に以下の状況が発見されました。 (1) ファイルが.jspファイル拡張子で保存されている場合、...

HTML(divレイヤー)を介してFLASHにリンクを追加するための実装コード

今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明

最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...

CentOS7でXShellとネットワーク設定を接続する方法

1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...

CentOS 8で自動更新を設定するための手順を完了する

データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...

クールなIoT大画面機能を実現するHTML+VUEページング

効果デモ.html <html> <ヘッド> <メタ文字セット=&qu...

複雑なSQLクエリを含むMySQLの一般的なSQL文の概要

1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

border-radiusは要素に丸い境界線を追加する方法です

border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...

MySQL シリーズ 6 のユーザーと認証

目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...

複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。

目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...

Windows での自動展開に Jenkins を使用するチュートリアル図

今日は、Jenkins + powershell スクリプトを使用して、.NET CORE スクリプ...