uniapp WeChat ミニ プログラムは Gaode マップを使用してバブルをカスタマイズします

序文

ユニアプリまたはネイティブ WeChat アプレット フレームワークは Gaode マップを使用しているとよく言われます。UI が Gaode マップではなく、API によって使用される Gaode マップであり、UI は依然としてフレームワークの組み込みマップです。つまり、UI は Gaode マップです。 、マップと API は分離されています。WeChat アプレットの組み込みマップは当然 Tencent Maps です。

高徳の地図

Gaode マップの API には、サーバーとクライアントの 2 つの部分が含まれます。頻繁に使用される API メソッドには、経度および緯度の住所分析と逆分析、および POI (Point of Interest) の取得が含まれます。POI とは、興味のある地点のことです。一般的な POI には、キーワード検索、周囲の情報があります検索、多角形エリア検索、ルート計画など クライアントが AutoNavi を使用する場合、PC Web 版、Android 版、IOS 版、WeChat ミニプログラム版があり、それぞれのバージョンで違いがあります。たとえば、WeChat アプレット版には API メソッドがほとんどありませんが、PC Web バージョンには多くの API メソッドがあります。

ネイティブ WeChat アプレット マップ コンポーネント

ネイティブ WeChat アプレットのマップ コントロールは、経路計画、マーカー、ラベル、バブルなどの属性を提供します。

<map 
		id="map"
	    longitude="{
   
   {longitude}}" 
		latitude="{
   
   {latitude}}"
 		scale="14"
 		show-location="true"
         markers="{
   
   {markers}}" 
         bindmarkertap="makertap"></map>

地図コンポーネントの一般的な属性をいくつか挙げます。

• マーカー、マークポイント
  • これは、マーカー配列、マーカー オブジェクト形式 {id、緯度、経度、タイトル...} です。
• ポリライン、ルート
  • これはルートの配列、ルート オブジェクト {points:[{longitude,latitude}],color} です。
• include-points、指定されたすべての座標点を含むように視野をズームします。
  • これは座標点の配列であり、座標点の形式は {経度,緯度} です。uniapp
    の地図コンポーネントは WeChat アプレットの地図コンポーネントと非常に似ており、同じものと考えることができます。

マーカー vs ラベル vs バブル

マップには、マーカー、ラベル、吹き出しという 3 つの一般的に使用される概念があります。これら 3 つは異なります。下の図を参照してください。赤いものは、テキストでマークされたマーカー、バブル、およびラベルです。

これは WeChat ネイティブ アプレットの例です。次のコードは、Gaode WeChat アプレット プラグイン サンプルに基づいて変更されています。キー コードは次のとおりです。コード内ではgetPoiAround メソッドが使用されています。

var that = this;
var myAmapFun = new amapFile.AMapWX({key:'高德key'});
myAmapFun.getPoiAround({
  success: function(data){
    markersData = data.markers;
    markersData.forEach(marker=>{
      marker.label={content:"标签："+marker.name,bgColor:"#d3cd9c",padding:5,borderWidth:1,borderRadius:4}
      marker.callout={content:"气泡:"+marker.name,bgColor:"#ebc3c3",display:"ALWAYS",padding:5,borderWidth:2,borderRadius:4}
    })
    that.setData({
      markers: markersData
    });
  }  
},

共通の要件と実装原則

マークポイント

ポイントをマークする原理は、ターゲット ポイントの座標をマーカーの構造に組み立て、それに値を割り当てることです。

ルート計画

ルート計画の原理は非常にシンプルで、AutoNavi のgetDrivingRoute メソッド（もちろん、自転車、徒歩、公共交通機関などのメソッドもあります）を介してポリライン データ形式にまとめられます。 AutoNavi API メソッドの形式はどちらも Yes で经度,纬度、経度が最初、緯度が最後で、カンマで区切られます。

ルート近くのマーカー

これの応用シナリオとしては、通常、A→Bから経路を計画した後、その経路の近くにあるガソリンスタンド（または観光スポット）などを表示する必要があります。その実装原理は、パスが一連の座標点で構成されており、すべてのガソリン スタンドから座標を結ぶ線までの距離をフィルタリングして計算することで (mysql には対応する地理関数があります)、ターゲットのガソリン スタンドの座標が取得されます。 、フロントエンドに戻り、地図のマーカーポイント API を通じて地図上にマークを付けます。

• フロントエンド、A->B の経路計画のための一連の座標を取得します。
  • AutoNavi のgetDrivingRoute メソッドを使用して、座標を文字列に組み立てます。以下の StationsNearbyLineQuery のポイント形式を参照してください。
• 一連の座標を受け取るバックエンド インターフェイス。Java を例にします。

/**
 * @description: 获取路线沿途的站点
 */
@Data
public class StationsNearbyLineQuery {

    /**
     * 坐标点，p1[,p2]...
     * p1格式：经度  纬度
     * 一言一概之，点与点之间逗号分隔，经纬度空格分隔
     */
    @NotBlank
    private String points;

    /**
     * 搜索范围(米)
     */
    private Integer distance;

}
/**
 * 获取路线沿途的站点
 * @param query 查询条件
 * @return
 */
@PostMapping("/getStationsNearbyLine")
public List<MerchantsVO> getStationsNearbyLine(@Valid @RequestBody StationsNearbyLineQuery query){
   //执行sql查询目标站点
}

• mysql はすべてのガソリン スタンドからパスまでの距離を計算し、範囲内のスタンドをフィルターで除外します。
  • select * from 加油站 where ST_Distance( ST_GeomFromText(concat('LINESTRING(', #{points}, ')')), POINT(longitude, dimensionality) ) * 111195 <= #{distance}
  • ここで 111195 を掛ける理由は、st_distance計算結果の単位が度であり、メートルに換算するには 111195 (地球の半径 6371000*PI/180) を掛ける必要があるためです。
• フロントエンドのアノテーション

カスタムバブル

バブルをカスタマイズするには、マーカーオブジェクトのcustomcallout属性を使用します。詳細については、マーカーのカスタムバブルcustomCalloutを参照してください。

使用方法は次のとおりです。マップ コンポーネントの下に callout という名前のスロット ノードを追加し、その内部カバービューが marker-id 属性を通じてマーカーにバインドされます
。マーカーが作成されると、カバービューによって表示されるコンテンツがマーカー ポイントの上に吹き出しとして表示されます。

<map>
  <cover-view slot="callout">
  //如果是动态的，则用wx:for之类的动态生成，因为map是较高层级组件，为了实现实现遮挡，
  //必须要用cover-view，它的层级高过map
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

指定する各マーカーオブジェクトに対応customCallout

marker:{
	id:"",
	customCallout: {
	     display: "ALWAYS"
	 },
}

上記に加えて、マークのバインドマーカータップをクリックする、ラベルのバインドラベルタップをクリックする、バブルのバインドコールアウトタップをクリックするなどのメソッドも提供されており、カスタム効果を実現しています。

要約する

デモを行うときは、オリジナルの WeChat フレームワークを使用してテストできます。Gaode WeChat アプレット プラグインはサンプル コードを提供します。uniapp をネイティブ WeChat アプレットに変換するステップが欠落しているため、コードはより直観的でデバッグしやすいように見えます。そしてWeChat アプレット 地図のドキュメントも改善する必要があります。