克隆地图上的信息框包括内容

最新推荐文章于 2023-03-31 10:54:48 发布
最新推荐文章于 2023-03-31 10:54:48 发布
阅读量162 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44161703/article/details/129337415
版权
直接上代码 ！！！ 会一步一步进行讲解 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>高德地图标记点信息框克隆和拖拽</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=8e990b742a2f4e168eee432972a9972c
    "></script>
    <style type="text/css">
        #container {
            width: 500px;
            height: 500px;
        }

        .headall {
            z-index: 111111;
            position: absolute;
            background: red;
        }

        .amap-info-content {
            height: 200px;
            width: 200px;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script type="text/javascript">
        var collectHeatMapPointIndex = 0
        var colllist = []
        // 地图
        map = new AMap.Map('container', {
            zoom: 10,//级别
            center: [121.479921, 31.286758],//中心点坐标
            viewMode: '3D',//使用3D视图
            features: ['bg', 'road'],
            showIndoorMap: false,
        });

        var lnglats = [
            [116.368904, 39.923423],
            [116.382122, 39.921176],
            [116.387271, 39.922501],
            [116.398258, 39.914600]
        ];
        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        for (var i = 0, marker; i < lnglats.length; i++) {
            var marker = new AMap.Marker({
                position: lnglats[i],
                map: map,
                title: i
            });
            marker.content = `
            <div class="headall"  id="heatMapBox${collectHeatMapPointIndex}">
            我是第 (${i + 1})个Marker
            <div  id="heatMapBox${collectHeatMapPointIndex}" class = 'dd'  onclick="lock(this,${i},'heatMapBox${collectHeatMapPointIndex}')"> 21212</div>
        </div> `;
            marker.on('click', markerClick);
            marker.emit('click', { target: marker });
        }

        function markerClick(e) {
            collectHeatMapPointIndex++
            if (colllist.length == 4) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
                return
            } else {
                colllist.push(marker)
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
            }


        }
        function lock(e, id, idClass) {
            console.log("我要克隆", idClass);

            colllist.forEach(item => {
                if (item.getTitle() == id) {
                    // console.log(22);
                    var oldTop = $('#' + idClass).offset().top;
                    var oldLeft = $('#' + idClass).offset().left;
                    if ($('#' + idClass).hasClass("active")) {
                        console.log("eww");
                        return
                    }
                    $('#container').prepend($('#' + idClass).clone())

                    item.setLabel({
                        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                        content: '',
                        direction: 'top'
                    });

                    $('#' + idClass).css('top', oldTop + 'px')
                    $('#' + idClass).css('left', oldLeft + 'px')
                    $('#' + idClass).addClass("active")
                    drag(idClass, 'headall')
                }
            })

        }
        map.setFitView();

        function drag(fatherBox, sonBox) {
            var oWin = document.getElementById(`${fatherBox}`)
            var oH2 = document.querySelector("." + sonBox)
            var bDrag = false
            var disX = (disY = 0)
            oH2.onmousedown = function (event) {
                var event = event || window.event
                bDrag = true
                disX = event.clientX - oWin.offsetLeft
                disY = event.clientY - oWin.offsetTop
                this.setCapture && this.setCapture()
                return false
            }
            document.onmousemove = function (event) {
                if (!bDrag) return
                var event = event || window.event
                var iL = event.clientX - disX
                var iT = event.clientY - disY
                var maxL = document.documentElement.clientWidth - oWin.offsetWidth
                var maxT = document.documentElement.clientHeight - oWin.offsetHeight
                iL = iL < 0 ? 0 : iL
                iL = iL > maxL ? maxL : iL
                iT = iT < 0 ? 0 : iT
                iT = iT > maxT ? maxT : iT

                oWin.style.marginTop = oWin.style.marginLeft = 0
                oWin.style.left = iL + 'px'
                oWin.style.top = iT + 'px'
                // if(parseInt(oWin.style.top) < $('.container').css('top').replace('px','')) {
                //     oWin.style.top = $('.container').css('top')
                // }
                return false
            }
            document.onmouseup = window.onblur = oH2.onlosecapture = function () {
                bDrag = false
                oH2.releaseCapture && oH2.releaseCapture()
            }
        }
    </script>
</body>

</html>
上方可以直接复制和粘贴，可以使用，用自己的key 自己去申请去 
  map = new AMap.Map('container', {
            zoom: 10,//级别
            center: [121.479921, 31.286758],//中心点坐标
            viewMode: '3D',//使用3D视图
            features: ['bg', 'road'],
            showIndoorMap: false,
        });
这个是创建地图的代码 
        var lnglats = [
            [116.368904, 39.923423],
            [116.382122, 39.921176],
            [116.387271, 39.922501],
            [116.398258, 39.914600]
        ];
        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        for (var i = 0, marker; i < lnglats.length; i++) {
            var marker = new AMap.Marker({
                position: lnglats[i],
                map: map,
                title: i
            });
            marker.content = `
            <div class="headall"  id="heatMapBox${collectHeatMapPointIndex}">
            我是第 (${i + 1})个Marker
            <div  id="heatMapBox${collectHeatMapPointIndex}" class = 'dd'  onclick="lock(this,${i},'heatMapBox${collectHeatMapPointIndex}')"> 21212</div>
        </div> `;
            marker.on('click', markerClick);
            marker.emit('click', { target: marker });
        }

        function markerClick(e) {
            collectHeatMapPointIndex++
            if (colllist.length == 4) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
                return
            } else {
                colllist.push(marker)
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
            }


        }
这一部分是创建marker点和信息框，大家可以看到 marker.content 这个是写相关内容的，看到里面有一个点击事件 就是克隆的函数 
map.setFitView();
始终显示在屏幕的范围 
  function lock(e, id, idClass) {
            console.log("我要克隆", idClass);

            colllist.forEach(item => {
                if (item.getTitle() == id) {
                    // console.log(22);
                    var oldTop = $('#' + idClass).offset().top;
                    var oldLeft = $('#' + idClass).offset().left;
                    if ($('#' + idClass).hasClass("active")) {
                        console.log("eww");
                        return
                    }
                    $('#container').prepend($('#' + idClass).clone())

                    item.setLabel({
                        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                        content: '',
                        direction: 'top'
                    });

                    $('#' + idClass).css('top', oldTop + 'px')
                    $('#' + idClass).css('left', oldLeft + 'px')
                    $('#' + idClass).addClass("active")
                    drag(idClass, 'headall')
                }
            })

        }
这一点很重要，就是克隆的函数 $('#container').prepend($('#' + idClass).clone()) 这个是地图的id div的 
  function drag(fatherBox, sonBox) {
            var oWin = document.getElementById(`${fatherBox}`)
            var oH2 = document.querySelector("." + sonBox)
            var bDrag = false
            var disX = (disY = 0)
            oH2.onmousedown = function (event) {
                var event = event || window.event
                bDrag = true
                disX = event.clientX - oWin.offsetLeft
                disY = event.clientY - oWin.offsetTop
                this.setCapture && this.setCapture()
                return false
            }
            document.onmousemove = function (event) {
                if (!bDrag) return
                var event = event || window.event
                var iL = event.clientX - disX
                var iT = event.clientY - disY
                var maxL = document.documentElement.clientWidth - oWin.offsetWidth
                var maxT = document.documentElement.clientHeight - oWin.offsetHeight
                iL = iL < 0 ? 0 : iL
                iL = iL > maxL ? maxL : iL
                iT = iT < 0 ? 0 : iT
                iT = iT > maxT ? maxT : iT

                oWin.style.marginTop = oWin.style.marginLeft = 0
                oWin.style.left = iL + 'px'
                oWin.style.top = iT + 'px'
                // if(parseInt(oWin.style.top) < $('.container').css('top').replace('px','')) {
                //     oWin.style.top = $('.container').css('top')
                // }
                return false
            }
            document.onmouseup = window.onblur = oH2.onlosecapture = function () {
                bDrag = false
                oH2.releaseCapture && oH2.releaseCapture()
            }
        }
大家可以仔细的看这个是拖拽的函数，可以研究一下 
#container {
            width: 500px;
            height: 500px;
        }

        .headall {
            z-index: 111111;
            position: absolute;
            background: red;
        }

        .amap-info-content {
            height: 200px;
            width: 200px;
        }

        .active {
            display: block;
        }

以上是相关的样式 主要是
.headall {
z-index: 111111;
position: absolute;
background: red;
}
一个定位要注意点，还有这个层级！！！
以上就是全部的代码和写的逻辑啦！，不懂的请及时评论，这个是一个简单的例子

nuxt.js 项目的使用
维克多噗噗的博客
07-02 3583
运行图 安装 npx create-nuxt-app project 配置 koa + axios typescript-vuex github ui框架 element-ui 目录结构 assets —资源目录 layouts —布局目录 middleware —中间件目录 plugins —插件目录 static —静态(后台) 在您的 vue 模板中, 如果你需要引入 a...
高德地图VueAPI（vue-amap）学习记录
Joshua_HIT的博客
06-03 1万+
最近想测试一下地图插件，就先试了一下引用高德地图，鉴于我主要在学习Node.js和Vue.js，所以先找了一下高德地图的Vue插件，vue-amap，这个插件很不错的一点就是，有一个不错的文档。具体使用方法并不难。
【高德地图】 .amap-info-content 边距样式问题
m0_46483779的博客
09-22 286
高德默认信息框样式
vue中使用高德地图infowindow的content的优化写法
想飞上天和太阳肩并肩
05-23 5073
在地图开发中，我们经常会需要用到infowindow，通常情况下，我们都是用拼接字符串的方式来填充content属性 let content = [ '<div class="shipInfoPop">', '<div class="h...
【高德地图开发】实现多点标注marker和动态信息窗体（InfoWindow）
gzyh_tech的博客
06-01 7926
【目标】实现通过ajax动态获取数据后在地图上标注多个marker加载信息窗体，如下图所示：点击marker弹出相应信息窗体（InfoWindow） 【实现代码】 ①定义全局marker,及一个infoWindow: var marker,infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); ②写一个...
高德地图 信息窗体（InfoWindow）
往前的娘娘
08-24 1万+
概述： 参考高德地图API：信息窗体 1、先分析高德给的例子： 默认样式信息窗体 var infoWindow; var map = new AMap.Map("container", { resizeEnable:true, center:[116.473188,3
地图克隆
02-18
HTML标签会被用来标识不同的元素，如地图容器、搜索框、按钮等，使网页内容具有语义化，方便浏览器理解和渲染。 【文件名称列表】：Maps-clone-master 这个文件名暗示这是一个Git仓库的主分支，通常在GitHub或其他...
jabo_app:基于Uber克隆，使用Google地图上的位置图标搜索当前位置和目的地
03-29
这个项目的核心功能是利用Google地图API来实现定位和导航，允许用户通过地图上的位置图标来查找并设定当前位置和目的地。这涉及到移动应用开发、地理信息系统（GIS）以及集成第三方服务，如Google Maps API。 ...
Java打造2D战舰克隆：使用libGDX框架
基本游戏规则包括：游戏通常在一个网格化的地图上进行，每个玩家控制一定数量的战舰，战舰以不同长度的块状分布在网格上；玩家轮流发射炮弹攻击对方的网格，如果击中战舰，则战舰受损，否则表示击空；当一方的所有...
网站地图克隆技术及HTML应用解析
从名称上看，这个文件夹可能包含了实现地图克隆功能的所有必要文件，包括HTML文件、JavaScript文件、CSS样式表、图片资源以及可能的服务器端代码（如果地图克隆项目包含后端服务的话）。 根据这些信息，我们可以...
cloneGojek：使用响应本机框架从gojek应用程序克隆
02-10
- **模拟器与真机测试**：在iOS Simulator和Android Emulator上测试，以及在真实设备上进行调试。 - **代码质量检查**：使用ESLint和Prettier确保代码风格一致和规范。 - **性能优化**：关注内存占用、渲染性能等，...
vue2 vue-amap plugin ControlBar插件使用和高德3D效果
qq_42027690的博客
08-17 2007
vue2 vue-amap plugin ControlBar插件使用和高德3D效果
在vue中使用高德地图api 默认生成自定义点坐标 pio搜索 定位等功能
weixin_45689786的博客
05-17 2369
项目需求 在h5项目中展示地图 地图上某些地区要默认展示点坐标 可搜索(未用上) 点击按钮 到当前位置 文档https://lbs.amap.com/api/jsapi-v2/summary/ 首先要先注册高德地图账号 申请key 这样就可以在项目中使用高德api了 引用方式 npm方式 npm i @amap/amap-jsapi-loader --save //下载 import AMapLoader from "@amap/amap-jsapi-loader"; //引入
高德地图API使用~Web开发~从创建到具体功能展示
weixin_47194802的博客
03-31 8251
如果你不想要这个原颜色，或者你做的大屏是其他颜色的，在高德地图API中打开控制台-找到自定义地图-你可以自己设计，也可找你的ui小姐姐给你设计，更甚至掏钱买他们现成的模板，选中点击分享，复制模板样式的id到代码中。在上面的for循环里面修改图片样式即可，也不一定非得用这一个图片，它遍历的每一项就是一个点嘛，所以你可以根据位置啊或者其他的来给他放不一样的图片。这个时候你会发现我们创建的图标，太大了，不符合我们的预期，所以我们接下来应该，修改图片大小----下面是具体代码，直接cv到我们刚刚的地图下面即可。
使用vue-amap
马优晨
12-03 7929
(图一) 页面预览 ：当前位置（红色 图标处） （图二）页面预览： 文字设置 + 弹框设置 (图三) 搜索插件 + toolBar 插件 (图四) 时间轴插件 &lt;template&gt; &lt;div class="amap-page-container"&gt; &lt;!-- 搜索框 --&gt; &lt;el-amap-search-box c...
vue 点标记 高德地图_vue加载高德地图，加标记点，点出文本框
weixin_39926040的博客
12-19 1389
1.配置 build---webpack.base.conf.js---module.exports-----externals: {'AMap': 'AMap',},2.物联网监测监测数量数据转换时间import AMap from 'AMap'var district, mapexport default {mounted: function() {this.init()},methods: ...
高德地图API——信息窗体InfoWindow
热门推荐
chenjing928的博客
05-23 3万+
信息窗体包括InfoWindow和AdvancedInfoWindow两个类，InfoWindow可以实现默认信息窗体、自定义信息窗体，AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。这篇文章只讲述InfoWindow。信息窗体是什么呢？先来看一个最简单的案例&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_2524963996

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值