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, {
                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-tian-w-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>