序文
最近コース設計を行っているのですが、近くの駐車スペースを検索する機能を実装する必要があります
。緑のマーカーは無料の駐車スペース、赤のマーカーは占有駐車スペースです。今、クリックする必要があります。緑のマーカー上でロック操作を実行し、緑のロックを赤のロックに変更します。
下の図に示すように、
中央の緑色の鍵をクリックすると、ポップアップ ウィンドウが表示され、クリックして鍵を閉じると、鍵が赤に変わります。
赤い鍵をクリックすると、プロンプトが表示されます「この駐車スペースは占有されているため、この操作は実行できません」
1. イベントをトリガーしてマーカーアイコンを変更します
アイデア: 対応するマーカーをクリックしてトリガーしますhandleMarkerTap() 関数、この関数は、クリックされたマーカーの ID に基づいて対応するマーカーを見つけ、緑色の錠の画像アドレスを赤色の錠の画像アドレスに変更して、アイコンを変更する効果を実現します。
駐車スペースがあるかどうかを確認するため占有状態、マーカーに title 属性を追加する必要もあります (それはあなた次第で、title、used などにすることができます)。占有されていない場合は、title = "Idle"、占有されていない場合は、title = "Occupied" となります。
2. 導入手順
2.1. wxmlページ
重要な点は、それをマップコンポーネントに追加することですバインドマーカー損失=“ハンドルマーカー損失”この属性行は、マップ コンポーネント内のマーカーをクリックするとトリガーされます。ハンドルマーカータップ()関数。
<map id="map" style="width:100vw; height:100vh"
markers="{
{markers}}" latitude="{
{latitude}}"
longitude="{
{longitude}}" scale="{
{scale}}"
bindmarkertap="handleMarkerTap" >
</map>
<mp-halfScreenDialog show="{
{showDialog}}">
<view slot="title">南京市-胜太西路</view>
<view slot="desc">{
{
currentMarker.id}} 号停车位</view>
<view slot="desc">当前状态: <text style="color:{
{currentMarker.title=='空闲'?'green':'red'}}">{
{
currentMarker.title}}</text></view>
<view slot="desc">费用: <text style="color:red"> ￥2/15min </text></view>
<view slot="footer" >
<button type="primary" class="weui-btn" bindtap="Unlock" data-id="{
{currentMarker.id}}">关锁</button>
<button type="primary" class="weui-btn" bindtap="Navigate">导航</button>
</view>
</mp-halfScreenDialog>
mp-halfScreenDialog コンポーネントでは weui ライブラリを使用する必要がありますが、これはデモンストレーション用ですので、実際の状況に応じてメソッドをコードに移植できます。
2.2. jsページコード
まず、handleMarkerTap 関数がトリガーされると、フロントエンドはユーザーがクリックしたマーカー情報を handleMarkerTap の仮パラメータ e に渡します。次に、find 関数を使用して、ユーザーがクリックした markerId を見つけることができます。this.data.markers配列内の対応するマーカー。このマーカーを使用してのみ、画像の変更操作を実行できます。
handleMarkerTap(e){
const marker = this.data.markers.find(item => item.id == e.markerId);
marker && this.setData({
currentMarker: marker, //记录用户点击的marker
showDialog: true //点击marker后跳出关锁弹窗
})
},
同時に、マーカーをクリックした後、コードは showDialog を false から true に変更します。これにより、フロントエンド ページにポップアップ ウィンドウが表示され、ポップ内のロック ボタンをクリックできるようになります。 - 駐車スペースをロックするための窓を上げます。
ここハンドルマーカータップ()主な機能は、ユーザーがクリックしたマーカーに応じて、該当するマーカーの駐車スペース情報を検索し、ユーザーに駐車スペース情報を表示することであり、アイコン変換操作はまだ行われていません。
ユーザーがロック ボタンをクリックした場合にのみ、ロック解除機能がトリガーされ、緑色の駐車スペース アイコンが赤色の駐車スペース アイコンに変わります。
フロントエンド コードでは、ロックボタンと同じくらい早い段階で、マーカーの ID を Unlock 関数パラメーターに渡しました。
<button bindtap="Unlock" data-id="{
{currentMarker.id}}"
>关锁</button> //currentMarker.id即为上一步你所点击并储存起来的markerId
ここdata-id=“{
{currentMarker.id}}”その機能は、パラメータを Unlock(e) 関数に渡すことであり、これは以下と同等です。e.currentTarget.dataset.id={
{currentMarker.id}}。このようにして、ユーザーがクリックしたマーカーの ID を仮パラメータ e (つまり、currentMarker.id）。
IDを取得後、IDに対応するマーカーの画像を比較することができますアイコンパスアイコンを置き換える効果を得るために変更を加えます。
Unlock(e){
const marker = this.data.markers.find(item => item.id == e.currentTarget.dataset.id);
//这里和上面总共要find两次的原因是，第一次是find对应marker用为了拿到车位信息并展示给用户看
//这一次的find是为了修改图片icon颜色，两次find的目的不同，看你自己需要了
const Full = "../../images/lock1.png" //占用车位 红色锁图片
const Empty = "../../images/lock2.png" //空闲车位 绿色锁图片
if(marker.title == "空闲"){
//空闲状态才可以关锁
let temp_marker_title = "markers[" + (marker.id-1) + "].title"
let temp_marker_iconPath = "markers[" +(marker.id-1) + "].iconPath"
//marker.id-1是因为markers数组是从0开始,这里因人而异，只要能成功修改对应marker就行
this.setData({
[temp_marker_title] : "占用",
[temp_marker_iconPath] : Full//改成红色锁的图片地址
})
}
else{
//如果是占用状态，则禁止开锁
console.log("已经被占用，无法进行该操作")
}
},
要約する
ここまでは、ボタンをクリックして関数をトリガーし、関数内のマーカーのアイコン アドレスを変更することでマーカー アイコンを変更する効果を実現しました。
実際にはまだ改善できる点がたくさんあります。たとえば、Unlock(e) 関数では、this.data.currentMarker.id を通じて ID を直接取得できます。ボタンを使用せずにパラメーターを渡すことができます。これは、一部の初心者向けに、button.メソッドによって渡されるパラメータを理解するためだけに説明します。