資訊專欄INFORMATION COLUMN
摘要：需求是點(diǎn)擊標(biāo)注的坐標(biāo)，彈出信息窗口，信息窗口里面綁定事件。由于天地圖創(chuàng)建標(biāo)注，每個(gè)標(biāo)注的名字不一樣，所以需要?jiǎng)討B(tài)添加元素。傳入?yún)?shù)圖標(biāo)信息。
需求是點(diǎn)擊標(biāo)注的坐標(biāo)，彈出信息窗口，信息窗口里面綁定事件。
由于天地圖創(chuàng)建標(biāo)注，每個(gè)標(biāo)注的名字不一樣，所以需要?jiǎng)討B(tài)添加Html元素。
//創(chuàng)建信息窗口對(duì)象
marker = new T.Marker(center);// 創(chuàng)建標(biāo)注
map.addOverLay(marker);
var infoWin1 = new T.InfoWindow();
var sContent =
"" +
"",
infoWin1.setContent(sContent);
marker.addEventListener("click", function () {
marker.openInfoWindow(infoWin1);
});// 將標(biāo)注添加到地圖中
這是天地圖上面的寫法， 但這樣些onclick方法的this是window，這就不符合需求。
想要拿到vue中的this指針，將dom寫到Vue.extend()構(gòu)造器里，然后創(chuàng)建實(shí)例，并掛載到想要掛載的元素上（new xxx().$mount()）。
以下是大概寫法
var enterpriseAll="";
const PeriodDiv = Vue.extend({
template:"" + "", props:["enterpriseName"], methods: { openInfo () { const ID=this.$refs.enterpriseName.getAttribute("id"); enterpriseAll.enterpriseBInfo(ID); }, openFactorMethod () { const ID=this.$refs.enterpriseName.getAttribute("id"); enterpriseAll.openFactorData(ID); }, }
});
export default {
data() {
return {}
},
mounted() {
enterpriseAll=this;
},
methods: {
enterpriseBInfo(id){ // 取到id進(jìn)行操作},
openFactorData(id){ // 取到id進(jìn)行操作},
getMap(){
// 這里渲染地圖 lnglats標(biāo)注圖標(biāo)的數(shù)組
for (let i = 0; i < lnglats.length; i += 1) {
this.drawTMakerOne(lnglats)
}
},
drawTMakerOne(lnglat){ // 往地圖上添加一個(gè)marker。傳入?yún)?shù)坐標(biāo)信息lnglat。傳入?yún)?shù)圖標(biāo)信息。
const marker = new T.Marker(new T.LngLat(lnglat.B, lnglat.L));
this.map.addOverLay(marker);
marker.addEventListener("click",() => {
const infoWin3 = new T.InfoWindow({ maxWidth: 800, maxHeight: 400 });
const component = new PeriodDiv({propsData:{enterpriseName:row.PName}}).$mount(); // 每次添加需要重新new一個(gè)
infoWin3.setContent(component.$el);
component.$refs.enterpriseName.setAttribute("id",row.id); // 企業(yè)ID
item.openInfoWindow(infoWin3);
);
},
}
}
因?yàn)橄肴〉浇M件里面的方法，所以將組件的this賦值給變量enterpriseAll。
注意vue.extend傳參是propsData
思路，dom放到組件里然后獲取組件，再將組件set。
想不到其他的辦法，所以先記錄下來，以后有好的處理方法了再優(yōu)化代碼。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106740.html
摘要：不建議底圖選擇中存在兩種不同坐標(biāo)體系，如下圖坐標(biāo)存在明顯的偏差，火星坐標(biāo)在采用坐標(biāo)系的地圖上位置偏上彩色中國天地圖全球衛(wèi)星地圖例如我們使用的類進(jìn)行查找，返回的數(shù)據(jù)都是國際坐標(biāo)，因此必須進(jìn)行偏差糾正。 ArcGIS for javascript開發(fā)心得 本次實(shí)例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細(xì)區(qū)別看官方...
摘要：這里借鑒了一下的處理方式，我們把單獨(dú)模塊的包裝成一個(gè)函數(shù)，提供一個(gè)全局的回調(diào)方法，加載完成時(shí)候再調(diào)用回調(diào)函數(shù)。 感謝本文引用鏈接的各位大佬們，小菜鳥我只是個(gè)搬運(yùn)工 1.談一談你理解的vue是什么樣子的？ vue是數(shù)據(jù)、視圖分離的一個(gè)框架，讓數(shù)據(jù)與視圖間不會(huì)發(fā)生直接聯(lián)系。MVVM 組件化：把整體拆分為各個(gè)可以復(fù)用的個(gè)體 數(shù)據(jù)驅(qū)動(dòng)：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。 可以在...
摘要：滾動(dòng)條不會(huì)出現(xiàn)在頭部和底部視窗中。新增功能滾動(dòng)條置底分頁加載的時(shí)候，保持滾動(dòng)條置于上次停留的位置。我們來看一下動(dòng)態(tài)圖，實(shí)現(xiàn)的功能今天只把這個(gè)具體視窗口的滾動(dòng)條的總結(jié)一下，其他兩個(gè)問題，沒有很大的意義。 一、前言 之前寫了一個(gè)happyChat的項(xiàng)目，主要是想學(xué)習(xí)一下socketIO的使用。然后最近在給happyChat做前端優(yōu)化和升級(jí)。發(fā)現(xiàn)第一版做的很low。 需要優(yōu)化的問題： 1、問...
摘要：指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于。對(duì)象形式佐客湯姆咪口修飾符修飾符是以半角句號(hào)指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。 指令 指令(Directives)是帶有v-前綴的特殊屬性。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。 v-if條件判斷 T...
閱讀 3118·2021-10-12 10:12
閱讀 1635·2021-09-09 11:39
閱讀 1961·2019-08-30 15:44
閱讀 2411·2019-08-29 15:23
閱讀 2949·2019-08-29 15:18
閱讀 3027·2019-08-29 13:02
閱讀 2758·2019-08-26 18:36
閱讀 793·2019-08-26 12:08
