Fatal编程技术网
  • javascript/
  • Javascript 在Vue2传单中扩展LMarker

Javascript 在Vue2传单中扩展LMarker

javascript vue.js leaflet

Javascript 在Vue2传单中扩展LMarker,javascript,vue.js,leaflet,vue-component,Javascript,Vue.js,Leaflet,Vue Component,我正在尝试扩展vue.js组件（来自Vue2手册），使其能够完成两件事： 存储有关标记的额外标识信息 发出自定义事件，父组件可以使用该事件显示与从服务器提取的标记相关的信息 以下代码是我所拥有的： <template> <div style="display: none;"> <slot></slot> </div> </template> <script> import LMarker fr

我正在尝试扩展vue.js组件（来自Vue2手册），使其能够完成两件事：

  • 存储有关标记的额外标识信息
  • 发出自定义事件，父组件可以使用该事件显示与从服务器提取的标记相关的信息
    • 以下代码是我所拥有的：

    <template>
  <div style="display: none;">
    <slot></slot>
  </div>
</template>
<script>
  import LMarker from 'vue2-leaflet'

  export default {
    name: 'LocalityMarker',
    extends: LMarker,
    props: {
      name: {
        type: String,
        required: true
      }

    },
    data: function () {
      return {
        number: 678
      }
    },
    methods: {
      updateLocality: function () {
        this.$emit('marker-clicked', this.number)
      }
    }
  }
</script>

    
从“vue2传单”导入LMarker
导出默认值{
名称：'LocalityMarker'，
扩展：LMarker，
道具：{
姓名：{
类型：字符串，
必填项：true
}
},
数据：函数（）{
返回{
电话：678
}
},
方法：{
更新性：函数（）{
此.$emit（'点击标记'，此.number）
}
}
}
    然而，这是行不通的。当我使用Vue Devtools查看组件时，我看到的是LocalityMarker中定义的属性，而不是LMarker中定义的属性

    Vue.js文档没有深入解释实际工作原理，因此我无法判断我做错了什么

    非常感谢你的帮助

    我认为问题在于您正在导入整个vue2传单包，而不仅仅是LMarker。如果在导入后插入调试器并检查LMarker对象，您将看到如下内容

    {L: {…}, findRealParent: ƒ, propsBinder: ƒ, LCircle: {…}, LCircleMarker: {…}, …}
    通过将导入行从“vue2传单”更改为
    import{LMarker}，可以只导入LMarker
    我认为问题在于您正在导入整个vue2传单包，而不仅仅是LMarker。如果在导入后插入调试器并检查LMarker对象，您将看到如下内容
    

    {L: {…}, findRealParent: ƒ, propsBinder: ƒ, LCircle: {…}, LCircleMarker: {…}, …}

    

    通过将导入行从“vue2传单”更改为
    import{LMarker}，可以只导入LMarker
    好吧，我有一个关于您的自定义标记的解决方案。我不扩展它，但我创建了另一个组件，该组件将由父级操作。
    
我不知道你到底想要什么，但如果你想做一个标记来接收额外的信息并显示这些信息；我希望我写了什么来帮助你。对不起，我写信了（我知道，我很糟糕）。
    
此父组件
    

    <template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

    

    <template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

    

    
div
l-map（：zoom=“zoom”：center=“center”style=“height:500px”）
l-tile-layer（：url=“url”，：attribute=“attr”）
div（v-for=“标记中的标记”）
客户（ref=“cada”，：coordinateLL=“marker”，：information=“'hola que tal；）”）
按钮（@click=“cambio”）是否关闭？
从“vue2传单”导入{LMap、LTILELLAYER、LMarker、LIcon}
从“/protoV2.vue”导入客户
导出默认值{
名称：“原型”，
组成部分：{
LMap、LTileLayer、LMarker、LIcon、custome
},
数据（）{
返回{
可见：对，
url:“http://{s}.tile.osm.org/{z}/{x}/{y}.png”，
属性：“©；参与者”，
缩放：2，
中心：[0,0]，
标记：[[46.1222，-12.222]，[46.1222,12.222]，
}
},
方法：{
坎比奥：函数（）{
for（设idx=0；idx
    
子组件
    

    <template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

    

    <template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

    

    
从“vue2传单”导入{LMarker、LPopup、LTooltip}；
导出默认值{
名称：“客户”，
组成部分：{
LMarker、LPopup、LTOLTIP
},
道具：{
协调人：{
类型：数组，
要求：正确
},
资料:{
类型：字符串，
要求：正确
}
},
beforeMount:function（）{
this.coordinal=L.latLng（this.coordinaell）；
},
方法：{
IsVisible：函数（msg）{
this.visible=！this.visible；
}
},
数据（）{
返回{
可见：对，
坐标：空，
信息：这是我的信息，
activa:错误
}
}
};

    

    嗯，我有一个关于您的自定义标记的解决方案。我不扩展它，但我创建了另一个组件，该组件将由父级操作。
    
我不知道你到底想要什么，但如果你想做一个标记来接收额外的信息并显示这些信息；我希望我写了什么来帮助你。对不起，我写信了（我知道，我很糟糕）。
    
此父组件
    

    <template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

    

    <template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

    

    
div
l-map（：zoom=“zoom”：center=“center”style=“height:500px”）
l-tile-layer（：url=“url”，：attribute=“attr”）
div（v-for=“标记中的标记”）
客户（ref=“cada”，：coordinateLL=“marker”，：information=“'hola que tal；）”）
按钮（@click=“cambio”）是否关闭？
从“vue2传单”导入{LMap、LTILELLAYER、LMarker、LIcon}
从“/protoV2.vue”导入客户
导出默认值{
名称：“原型”，
组成部分：{
LMap、LTileLayer、LMarker、LIcon、custome
},
数据（）{
返回{
可见：对，
url:“http://{s}.tile.osm.org/{z}/{x}/{y}.png”，
属性：“©；参与者”，
缩放：2，
中心：[0,0]，
标记：[[46.1222，-12.222]，[46.1222,12.222]，
}
},
方法：{
坎比奥：函数（）{
for（设idx=0；idx
    
子组件
    

    <template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

    

    <template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

    

    
从“vue2传单”导入{LMarker、LPopup、LTooltip}；
导出默认值{
名称：“客户”，
组成部分：{
LMarker、LPopup、LTOLTIP
},
道具：{
协调人：{
类型：数组，
要求：正确
},
资料:{
类型：字符串，
要求：正确
}
},
beforeMount:function（）{
this.coordinal=L.latLng（this.coordinaell）；
},
方法：{
IsVisible：函数（msg）{
this.visible=！this.visible；
}
},
数据（）{
返回{
可见：对，
坐标：空，
信息：这是我的信息，
activa:错误
}
}
};