電話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 つの場所間の異なる移動モードのルートを取得する方法は、上記の 2 点間のナビゲーション部分にあります。複数のポイント間のルート ナビゲーションは、実際には複数のポイント間のルート ナビゲーションを接続します。まず、上記の 2 つのポイント間の異なる移動モードのナビゲーションを実装し、次に小さな変更を加えて、完全な順列アルゴリズムとサイズ比較アルゴリズムを追加して実装します。ここではソース コードを投稿しません。 私のアイデアがあなたにインスピレーションを与えてくれることを願っています〜 最適化可能な部品
注: 上記4点はとりあえず思いついた部分です。自分で穴を掘るような感じです。埋めたらここに実装方法を書いていきます。 これで、Amap WeChatミニプログラムのマルチポイントルート計画プロセスの例の詳細な説明に関するこの記事は終了です。より関連性の高いAmapマルチポイントルート計画コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策
>>: MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)
以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...
開発中に以下の状況が発見されました。 (1) ファイルが.jspファイル拡張子で保存されている場合、...
今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...
最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...
1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...
データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...
効果デモ.html <html> <ヘッド> <メタ文字セット=&qu...
1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...
環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....
border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...
目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....
目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...
今日は、Jenkins + powershell スクリプトを使用して、.NET CORE スクリプ...