leaflet自定义popup弹框，给popup弹框显示内容添加按钮button或者超链接等html标签

acoolgiser

修改于 2025-10-29 14:34:22

6K00

代码可运行

文章被收录于专栏：acoolgiser_zhuanlanacoolgiser_zhuanlan

运行总次数：0

代码可运行

首先效果图：

这里在弹框的文字下面添加了一个button按钮和超链接。这种效果在web应用中很常见。所以下面总结一下如何用leaflet实现。

首先要用leaflet实现弹框的效果（如下图），这个就不详细介绍了，比较简单，参考leaflet官网：https://leafletjs.com/index.html

或者这里介绍一个可以在线运行示例的很棒的学习工具 https://jsfiddle.net/5apzcqvu/18/

大概的代码如下：

<template>
     <div class="" title="">
                <l-map">
                    <l-tile-layer :url="url"></l-tile-layer>
                        </l-marker>
                            <l-popup :content="name"></l-popup>
                        <l-marker :lat-lng="marker"></l-marker>
                </l-map>
     </div>
</template>

<script>
    import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'; 

    export default {

        components: {
            LMap,
            LTileLayer,
            LMarker,
            LPopup
        },

        data () {
            return {
                options:{
                    zoom:10,
                    center: [47.413220, -1.219482],
                    minZoom: -11,
                    attributionControl: false
                },
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                marker: L.latLng(47.413220, -1.219482),
                name: 'Contact1'

            }
        },  /*end of data()*/

        methods: {

        },





    };/* end of export */



</script>

重点：如何添加超链接和按钮标签？

只需要在popup组件的content属性里面设置即可，注意不是直接在vue的模板template里的leaflet组件里面加，即：

<l-popup :content="name<br><button>进入</button>"></l-popup>

而是在script代码里面的属性设置的地方添加。即：

name: 'Contact1<br><button>进入</button>'

个人觉得原因是html的标签要在script中才能被浏览器解析。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年11月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度