uni-app はナビゲーション用のサードパーティ地図ソフトウェアを開きます

最近、バイトアプレットの開発過程でマップナビゲーションの必要性に遭遇しましたが、誰もが遭遇すると思いますので、辛口の記事をまとめました。

以下は私がコンパイルしたコードケースです。---------- 水を飲むことを忘れないでください（「乾燥しすぎている」ため、コピーを使用できます）。

レンダリングは次のとおりです。

1. アイコンをクリックしてポップアップボックスを表示し、選択します

2. 選択が完了したら、サードパーティ製ソフトウェアにジャンプします

3. サードパーティ製ソフトウェア内で移動する

HTML部分:

			<map style="width: 100%; height: 300px;"
				:latitude="startposition.lat" 
				:longitude="startposition.lng" 
				:markers="covers"
				@markertap="openMap(startposition.lat,startposition.lng,initFoemdata.title)"
			>
			</map>

緯度と経度、マーカーはその場所の緯度と経度です

マーカータップはアイコンのクリックイベントです

DATA データ部分:

startpositionと開いた地図の緯度と経度、 coversは目的地の緯度と経度、 labelは以下のテキストコンテンツです。iconPathはアイコンの画像インポートパスです。

			// 地图
			startposition: {
				lng: 123.054145,
				lat: 41.160569
			},
            covers: [{
                latitude: 41.160569,
                longitude: 123.054145,
                iconPath: "../../static/map1.png",
				label: {
					content: 'Jeskson',
					color: '#fff',
					fontSize: 12,
					borderRadius: 5,
					padding: 5,
					textAlign: 'center',
					bgColor: '#2979ff',
				},
            }]

JSロジック部分：

上の図はデータの初期化割り当てを示しています。これは独自のインターフェイスまたはデータに従って定義できます。

以下の図は、サードパーティの地図ソフトウェアを開くコードを示しています。

			// 打开的点击事件，传经纬度和地点名
			openMap(latitude,longitude,name){
				// 打开第三方 （小程序）
			uni.getLocation({
				success(res) {
					uni.openLocation({
						latitude: latitude,
						longitude: longitude,
						scale: 15
					});
				}
			});
			}

おめでとうございます。上記の手順を完了すると、マップナビゲーションの機能を実現できます。

このコードはミニプログラム H5にのみ適用され、APP には互換性がないことに注意してください。

前回の作品は転載しづらいのでリンクお願いします！