WeChatミニプログラム開発の実際の戦闘（18）：地図コンポーネント

<map>タグを使用して小さなプログラムに地図を埋め込むことができるので、多くの学生が<map>に埋め込まれている地図を尋ねるでしょうか？当然ですが、これはTencentのマップであり、他のマップ（Baidu、Gaodeなど）に置き換えることはできません。

まず、<map>タグの一般的な属性を理解しましょう。

経度：経度
緯度：緯度
スケール：ズームレベル、デフォルト値は16、値の範囲は5〜18
コントロール：マップ上に配置されたコントロールの配列
マーカー：マップ上に配置されたマーカーの配列
show-location：現在の場所と方向を表示します
bindcontroltap：コントロールがクリックされたときにトリガーされるイベント
bindmarkertap：マーカーがクリックされたときにトリガーされるイベント
bindregionchange：視野が変化したときにトリガーされるイベント

以下のレイアウトファイルに<map>タグを配置し、上記の属性を設定します。

<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{
    
    {controls}}"
bindcontroltap="controltap" markers="{
    
    {markers}}"
bindmarkertap="markertap" polyline="{
    
    {polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>

表示された効果を図1に示します。

図1はTencentマップを示しています

地図上には、マーカー（スマイリーフェイス画像）とコントロール画像（スマーフ画像）が表示されます。多くの学生が尋ねるかもしれません、マーカーとコントロールの違いは何ですか？画像を配置できますか？実際、マーカーとコントロールは基本的に同じですが、主な違いは1点のみです。マーカーはマップとともに移動しますが、コントロールはマップとともに移動しません。

<map>タグでは、ほとんどの属性が変数を使用しています。これらの変数のコードと対応するメソッドは次のとおりです。

Page({
  data: {
    markers: [{
      iconPath: "/image/face.png",   //  标记图像
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{                     //  在地图上通过经纬度绘制折线
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF00FF",
      width: 5,
      dottedLine: false
    }],
    controls: [{
      id: 1,
      iconPath: '/image/sprite.png',   //  控件图像
      position: {
        left: 0,
        top: 260 - 80,
        width: 80,
        height: 80
      },
      clickable: true                 //  设为控件可单击的状态
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

このコードには、マーカー、ポリライン、コントロールの3つの配列があることがわかります。これらの3つの配列はすべて、オブジェクトを通じて複数のプロパティを定義します。マーカー配列とコントロール配列の属性は似ており、前者では各配列要素がマーカーを表し、後者では配列要素がコントロールを表します。ポリラインの各配列要素はポリラインを表します（ポリラインの各ポイントは緯度と経度によって決まります）。これらのポリライン（この場合は直線）は、頭頂部のスマイルマークの中心から上方に伸びています。

コントロールとマークの両方をクリックできます。クリックすると、コンソールに出力されたログ情報が図2に表示されます。マーカーとコントロールの配列で定義されたid属性値は、それぞれログ情報に出力されます。

図2マークとコントロールをクリックして出力されるログ情報

この記事に興味がある場合は、Li Ning先生のWeChatパブリックアカウント（unitymarvel）を追加できます。

Geek Originの公式アカウントをフォローして、無料のテクニカルビデオや記事を入手してください。

WeChatミニプログラム開発の実際の戦闘（18）：地図コンポーネント

おすすめ