国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue中動態添加html并綁定事件(天地圖信息窗口綁定事件)

hot_pot_Leo / 2413人閱讀

摘要：需求是點擊標注的坐標，彈出信息窗口，信息窗口里面綁定事件。由于天地圖創建標注，每個標注的名字不一樣，所以需要動態添加元素。傳入參數圖標信息。


需求是點擊標注的坐標，彈出信息窗口，信息窗口里面綁定事件。
由于天地圖創建標注，每個標注的名字不一樣，所以需要動態添加Html元素。

 //創建信息窗口對象
        marker = new T.Marker(center);// 創建標注
        map.addOverLay(marker);
        var infoWin1 = new T.InfoWindow();
        var sContent =
          "
" +
    "
" +
    "
名稱
" +
    "" +
    "" +
    "
",
        infoWin1.setContent(sContent);
        marker.addEventListener("click", function () {
            marker.openInfoWindow(infoWin1);
        });// 將標注添加到地圖中

這是天地圖上面的寫法， 但這樣些onclick方法的this是window，這就不符合需求。
想要拿到vue中的this指針，將dom寫到Vue.extend()構造器里，然后創建實例，并掛載到想要掛載的元素上（new xxx().$mount()）。
以下是大概寫法
var enterpriseAll="";
const PeriodDiv = Vue.extend({

template:"
" +
    "
" +
    "
{{enterpriseName}}
" +
    "" +
    "" +
    "
",
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進行操作},
  openFactorData(id){ //  取到id進行操作},
  getMap(){
   //  這里渲染地圖   lnglats標注圖標的數組
   for (let i = 0; i < lnglats.length; i += 1) {
          this.drawTMakerOne(lnglats)
   }
  },
 drawTMakerOne(lnglat){  // 往地圖上添加一個marker。傳入參數坐標信息lnglat。傳入參數圖標信息。
      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一個
          infoWin3.setContent(component.$el);
          component.$refs.enterpriseName.setAttribute("id",row.id);  // 企業ID
          item.openInfoWindow(infoWin3);
      );
  },
}

}

因為想取到組件里面的方法，所以將組件的this賦值給變量enterpriseAll。
注意vue.extend傳參是propsData

思路，dom放到組件里然后獲取組件，再將組件set。
想不到其他的辦法，所以先記錄下來，以后有好的處理方法了再優化代碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106740.html

相關文章

  • vue地圖可視化 ArcGIS篇（3）

    摘要：不建議底圖選擇中存在兩種不同坐標體系，如下圖坐標存在明顯的偏差，火星坐標在采用坐標系的地圖上位置偏上彩色中國天地圖全球衛星地圖例如我們使用的類進行查找，返回的數據都是國際坐標，因此必須進行偏差糾正。 ArcGIS for javascript開發心得 本次實例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區別，就不一一列舉，詳細區別看官方...

    oogh 評論0 收藏0

  • vue常用知識點總結

    摘要：這里借鑒了一下的處理方式，我們把單獨模塊的包裝成一個函數，提供一個全局的回調方法，加載完成時候再調用回調函數。 感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工 1.談一談你理解的vue是什么樣子的？ vue是數據、視圖分離的一個框架，讓數據與視圖間不會發生直接聯系。MVVM 組件化：把整體拆分為各個可以復用的個體 數據驅動：通過數據變化直接影響bom展示，避免dom操作。 可以在...

    xiaokai 評論0 收藏0

  • 【JavaScript系列】vue項目中實現滾動條（具體視窗口的滾動條）操作：（1）置底，（2）置于

    摘要：滾動條不會出現在頭部和底部視窗中。新增功能滾動條置底分頁加載的時候，保持滾動條置于上次停留的位置。我們來看一下動態圖，實現的功能今天只把這個具體視窗口的滾動條的總結一下，其他兩個問題，沒有很大的意義。 一、前言 之前寫了一個happyChat的項目，主要是想學習一下socketIO的使用。然后最近在給happyChat做前端優化和升級。發現第一版做的很low。 需要優化的問題： 1、問...

    lovXin 評論0 收藏0

  • vue.js學習筆記

    摘要：指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于。對象形式佐客湯姆咪口修飾符修飾符是以半角句號指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。 指令 指令(Directives)是帶有v-前綴的特殊屬性。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于DOM。 v-if條件判斷 T...

    levy9527 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<