快捷導(dǎo)航

vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析

更新時(shí)間：2023年11月17日 10:23:53 作者：akglobe

這篇文章主要介紹了vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1.識(shí)別點(diǎn)擊

1.1初始o(jì)nEvent

在初始化場(chǎng)景的地方onEvent是與場(chǎng)景交互的,

我們這里就設(shè)置成當(dāng)場(chǎng)景被點(diǎn)擊的方法

ak_event調(diào)用當(dāng)中的方法是需要提前引入的

1.2 onEvent.js

/**
 * 事件處理點(diǎn)擊
 * 起點(diǎn)在init_test內(nèi)
 */
import ak_click from "./ak_click.js";
import ak_api from "../../api/ak_api.js";
var  ak_event= {
	/**
	 * 控制
	 */
    handler: null,
	currentClickObject:null,
	/**
	 * 初始化
	 */
	init:function(e){
		if(e.eventtype=="LeftMouseButtonClick"){
			ak_event.LeftMouseButtonClick(e);
		}
	},
	type:1,
	LeftMouseButtonClick:function(e){
      window.modelId ="";
		if(e.Type=="marker"){
       window.modelId = e.Id
			 // config.modelId=e.Id;
			 console.log("我是marker  我的ID 是：：：：："+e.Id);
			 ak_click.getClickObj();
			 return ;
		}else if(e.Type=="TileLayer"){
			//  該變量將作為 其他業(yè)務(wù)使用的參數(shù) 獲取期內(nèi)的objectId,坐標(biāo) 范圍等參數(shù)
			 ak_event.currentClickObject=e;
			 var ObjectID=e.Id;//  e.ObjectID;
			 console.log("我是TileLayer  信息  我即將被點(diǎn)擊  ");
			 console.log("dddddddddddddddddddddddd");
			   __g.tileLayer.stopHighlightActor();
			 if(ObjectID){
                ak_click.getClickObj(e.Id);
			}else{
				// 如果沒(méi)有Objid 進(jìn)行處理
			}
		}else if(e.Type=="Custom_Tag"){
			//  該變量將作為 其他業(yè)務(wù)使用的參數(shù) 獲取期內(nèi)的objectId,坐標(biāo) 范圍等參數(shù)
			ak_event.currentClickObject=e;
			var ObjectID=e.Id;//  e.ObjectID;
			var ss = ObjectID.indexOf("hjs");
			if(ObjectID.indexOf("hjs")!=-1){
				console.log("Custom_Tag:環(huán)境水:"+ObjectID);
			}else if(ObjectID.indexOf("cktxp")!=-1){
				console.log("Custom_Tag:窗口:"+ObjectID);
			}
		}
	},
}
export default ak_event

我們寫(xiě)的js中的方法想要其他地方能引用,需要在最下面,寫(xiě)

export default ak_event 每個(gè)js都是如此,ak_event是需要和js名統(tǒng)一和var 的變量名一致

這里判斷的是識(shí)別是點(diǎn)擊的marker還是TileLayer

if(e.Type=="marker"){
       window.modelId = e.Id
             // config.modelId=e.Id;
             console.log("我是marker  我的ID 是：：：：："+e.Id);
             ak_click.getClickObj();
             return ;
 }else if(e.Type=="TileLayer"){

把id設(shè)置成全局變量供其他方法可使用

 window.modelId = e.Id

1.3 判斷是那個(gè)marker被點(diǎn)擊

判斷那個(gè)marker被點(diǎn)擊是根據(jù)設(shè)置marker的時(shí)候id

在ak_event里面判斷如果是marker被點(diǎn)擊,會(huì)進(jìn)入到ak_click方法中,然后根據(jù)寫(xiě)好的id前綴來(lái)判斷是那個(gè)marker被點(diǎn)擊,點(diǎn)擊后要執(zhí)行的方法,

ak_click代碼

/**
 * 點(diǎn)擊事件的處理
 */
import ak_even from "./ak_event.js";
import ak_spjk from "../../cloud/ak_business_geodb/ak_spjk.js";
var  ak_click={
	obj1:null,
	getClickObj:function(){
     var id=modelId;
     var e=id;
		 if(id.indexOf("MPH001")>0){
		     ak_mpjz.Showimagegs();
			 return ;
		 }
		// 高亮選中 對(duì)象
	  //	__g.tileLayer.highlightActor(config.currentTileLayerId, e);
		if(e.indexOf("bgsb")>0){ //辦公設(shè)備
					// 展示辦公電腦的 監(jiān)控情況  正常異常對(duì)比
					if(e.indexOf("bgsb_dn")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示辦公設(shè)備打印機(jī)的 監(jiān)控情況 正常-異常對(duì)比
					}else if(e.indexOf("bgsb_dyj")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示辦公設(shè)備大型打印機(jī)的 監(jiān)控情況 正常-異常對(duì)比
					}
			}
			 //視頻監(jiān)控
			else if(id.indexOf("spjk")>0){
				if(id.indexOf("spjk_ptsxt")>0){
						ak_spjk.getIpByMid();
				}
			}else if(e.indexOf("yy")>0){   //預(yù)約
				if(e.indexOf("yy_qhj")>0){
					// 取號(hào)機(jī)的 性能監(jiān)測(cè)數(shù)據(jù)
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_pjq")>0){
					//評(píng)價(jià)器的 性能監(jiān)測(cè)數(shù)據(jù)
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhq")>0){
					//叫號(hào)器的 性能監(jiān)測(cè)數(shù)據(jù)
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhp")>0){
					//叫號(hào)屏的 性能監(jiān)測(cè)數(shù)據(jù)
					// ak_bangong.getZwAndroidSbTj();
				}else if(e.indexOf("yy_zzj")>0){
					//自助機(jī)的 性能監(jiān)測(cè)數(shù)據(jù)
					ak_zichan.getSbZzjInfo();
				}else if(e.indexOf("yy_cktxp")>0){
					//窗口條形屏的 性能監(jiān)測(cè)數(shù)據(jù)
					ak_yuyue.getckModel();
				}
			}else if(e.indexOf("xxfb")>0){ //信息發(fā)布
				if(e.indexOf("xxfb_dp")>0){
					//  大屏幕 展示輪播 視頻
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_txp")>0){
					//  條形屏幕 展示輪播 視頻
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_zd")>0){
					//  終端 展示輪播 圖片
					ak_message.getXxfbtplb();
				}else if(e.indexOf("xxfb_hxp")>0){
					//  環(huán)形屏 展示輪播 視頻
					ak_message.getXxfbsplb();
				}
			}else if(e.indexOf("cd")>0){ //場(chǎng)地
				if(e.indexOf("cd_hys")>0){
					//  場(chǎng)地 會(huì)議室
					ak_field.gethysModel();
				}else if(e.indexOf("cd_mj")>0){
					// 場(chǎng)地門(mén)禁
					ak_field.gethysModel();
				}
			}
	}
}
export default ak_click;

ak_spjk.js

var ak_spjk={
  getIpByMid:function(){
    console.log("啦啦啦啦+++++視頻監(jiān)控了"+modelId)
    console.log(modelId)
  }
}
export default ak_spjk;

到此這篇關(guān)于vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析的文章就介紹到這了,更多相關(guān)vue marker點(diǎn)擊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: