BIGEMPA Js API示例中心
popup拖動(dòng)源代碼展示

代碼編輯區(qū) 運(yùn)行下載還原
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
        <script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
        <title>Google Map Streets</title>
    </head>
    <body>
        <div id="map"></div>
        <script>
            // 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
            BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
            // 在ID為map的元素中實(shí)例化一個(gè)地圖，并設(shè)置地圖的ID號(hào)，ID號(hào)程序自動(dòng)生成，無(wú)需手動(dòng)配置 ，中心點(diǎn)，默認(rèn)的級(jí)別和顯示級(jí)別控件
            var map = BM.map("map",null, {
                crs: BM.CRS.EPSG4326,
                center: [30, 104],
                zoom: 13,
                zoomControl: true,
                attributionControl: false,
                preferCanvas: true,
                minZoom: 3,
            });
            var marker = BM.marker([30, 104]).addTo(map);
            var tileLayer = BM.tileLayer("bigemap.dc-satellite").addTo(map);
            // 綁定彈出窗口并添加拖動(dòng)功能
            marker
                .bindPopup("拖動(dòng)我！<br>這是一個(gè)可拖動(dòng)的彈出窗口。")
                .on("popupopen", function (e) {
                    var popup = e.popup;
                    var element = popup.getElement();
                    var contentWrapper = element.querySelector(
                        ".bigemap-popup-content-wrapper"
                    );

                    var startContainerPoint;
                    var startMousePoint;
                    var dragging = false;

                    // 添加拖動(dòng)樣式
                    contentWrapper.style.cursor = "move";

                    // 鼠標(biāo)按下事件
                    BM.DomEvent.on(contentWrapper, "mousedown", function (e) {
                        dragging = true;
                        startContainerPoint = map.latLngToContainerPoint(
                            popup.getLatLng()
                        );
                        startMousePoint = BM.point(e.clientX, e.clientY);

                        // 阻止默認(rèn)行為和事件冒泡
                        BM.DomEvent.stopPropagation(e);
                        BM.DomEvent.preventDefault(e);

                        // 添加全局移動(dòng)和釋放事件
                        BM.DomEvent.on(document, "mousemove", onMouseMove);
                        BM.DomEvent.on(document, "mouseup", onMouseUp);
                    });

                    // 處理鼠標(biāo)移動(dòng)
                    function onMouseMove(e) {
                        if (!dragging) return;

                        var newMousePoint = BM.point(e.clientX, e.clientY);
                        var offset = newMousePoint.subtract(startMousePoint);
                        var newContainerPoint = startContainerPoint.add(offset);
                        var newLatLng =
                            map.containerPointToLatLng(newContainerPoint);
                        // 更新彈出窗口位置
                        popup.setLatLng(newLatLng);
                        BM.DomEvent.stopPropagation(e);
                    }

                    // 處理鼠標(biāo)釋放
                    function onMouseUp() {
                        dragging = false;
                        BM.DomEvent.off(document, "mousemove", onMouseMove);
                        BM.DomEvent.off(document, "mouseup", onMouseUp);
                    }
                });

            // 打開(kāi)彈出窗口
            marker.openPopup();
        </script>
    </body>
</html>
高清在线一区二区_激情网在线观看_激情一区二区三区_精品中文一区_亚洲中字幕_亚洲天堂一区

popup拖動(dòng)源代碼展示
