場景

Leaflet中自定義marker的icon圖標：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122322788

在上面自定義marker的基礎之外，還可以通過給marker添加popup彈窗

並設置popup的content達到自定義彈窗內容的效果。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、添加圖片標注

        //添加圖片標注
        var Marker = L.marker([36.09, 120.35]).addTo(map);

2、設置點擊事件

        Marker.on('click', function () {
            //添加Popup標注，顯示一段文字和一幅圖片
            var popup = L.popup().setLatLng([36.09, 120.35]).setContent('<div style="width:268px;font-size:16px">小區一隅，您可以在此盡享美好時光...</div> <img style="width:268px;" src="./images/timg.jpg" />').openOn(map);
        });

3、完整示例代碼

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet添加標注popup</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        //添加圖片標注
        var Marker = L.marker([36.09, 120.35]).addTo(map);

        /**鼠標單擊事件
        *  @param {string} type 事件類型（鼠標單擊）
        *  @param {function} fn 事件觸發后的響應函數
        */
        Marker.on('click', function () {
            //添加Popup標注，顯示一段文字和一幅圖片
            var popup = L.popup().setLatLng([36.09, 120.35]).setContent('<div style="width:268px;font-size:16px">小區一隅，您可以在此盡享美好時光...</div> <img style="width:268px;" src="./images/timg.jpg" />').openOn(map);
        });
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Leaflet中添加標記、折線、圓圈、多邊形、彈窗顯示點擊處坐標 elementUI的Message Box彈窗中添加圖片並顯示在layer彈窗中添加點擊事件 wordpress添加視頻彈窗插件Video PopUp WPF中Popup等彈窗的位置不對(偏左或者偏右) FPM十一：點擊POPUP顯示明細 Leaflet添加圖片圖層：ImageOverlay Leaflet：Marker、Popup類 layer 彈窗顯示圖片 HTML5 添加多張圖片，可點擊彈窗放大。限定4張，可刪除。