BIGEMPA Js API示例中心
popup拖動源代碼展示

代碼編輯區運行下載還原
<!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的元素中實例化一個地圖，并設置地圖的ID號，ID號程序自動生成，無需手動配置 ，中心點，默認的級別和顯示級別控件
            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);
            // 綁定彈出窗口并添加拖動功能
            marker
                .bindPopup("拖動我！<br>這是一個可拖動的彈出窗口。")
                .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;

                    // 添加拖動樣式
                    contentWrapper.style.cursor = "move";

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

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

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

                    // 處理鼠標移動
                    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);
                    }

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

            // 打開彈出窗口
            marker.openPopup();
        </script>
    </body>
</html>
BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

popup拖動源代碼展示
