百度地图api自定义信息窗口

最新推荐文章于 2023-04-12 13:15:48 发布
最新推荐文章于 2023-04-12 13:15:48 发布
阅读量2.6k 收藏 8
点赞数 3
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HouRuoTong/article/details/113913591
版权
首先创建地图标签

注意要对地图定义宽高，否则地图不能显示

<div class="center">
    <div id="map" style="height: 565px;width: 1000px"></div>
</div>
调用百度地图api
  1. 先创建地图实例
  2. 设置地图中心点(会根据地图中心点定位初始区域)
  3. 创建标注点，并以红点的形式展示在地图上
  4. 添加点击事件(点击红点，出现地点详情信息)
function map(){
    // 百度地图API功能
    var map = new BMap.Map("map",{enableMapClick:false}); // 创建Map实例 
    map.centerAndZoom("郑州", 5);
    var point = new BMap.Point(100.38,37.31);//设置中心点坐标
    var marker = new BMap.Marker(point); // 创建点 
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    map.addOverlay(marker); //添加点
    var points = [  
      {"lng":110.58,"lat":27.89,"where1":"怀化市","id":1,"name":"p1","where2":"xxx","where3":"xxx"},  
      {"lng":112.59,"lat":40.90,"where1":"呼和浩特市","id":2,"name":"p2","where2":"xxx","where3":"xxx"},  
      {"lng":102.57,"lat":36.88,"where1":"西宁市","id":3,"name":"p3","where2":"xxx","where3":"xxx"},
      {"lng":100.38,"lat":37.31,"where1":"西宁市","id":3,"name":"p4","where2":"xxx","where3":"xxx"}   
    ]; 
    var pointsLen = points.length;
    //循环建立标注点
    for(var i=0; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
        var marker = new BMap.Marker(point); //将点转化成标注点
        map.addOverlay(marker);  //将标注点添加到地图上
        //添加监听事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint);//显示信息窗口的函数
            });
         })();  
    }
}

//自定义信息窗口
function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent = '<div class="little_title"></div>'
    +'<div class="infoScroll" style="height:230px;overflow-y:scroll;font-size:0.2rem;margin-top:1vh;"><table>'  
    +'<tr><td style="color:grey">'+'编号'+ '</td><td><span>'+point.id+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'省份'+ '</td><td><span>'+point.name+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'地级市'+ '</td><td><span>'+point.where1+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'县(市、区)'+ '</td><td><span>'+point.where2+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'乡(镇)'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'村'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'场点'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'场点类型'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'经度'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'纬度'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否长途调运'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'调入来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否接触野猪'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'周边是或否有野猪'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否喷泔水'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'泔水来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'泔水来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'车辆进场'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'外来人员'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'发病日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'报告日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'采样日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊单位'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊方法'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊结果'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'动物种类'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'临床症状'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'易感动物数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'发病数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'死亡数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'销毁数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'捕杀数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'已采取的防控措施'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'备注'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'</table></div>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    infoWindow.addEventListener('open',function(type,target,point){
        $('.BMap_pop>img').hide();//隐藏窗口自带的关闭按钮
    })
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}

由于数据过多，所以对信息窗口添加了滚轮效果

/* 信息框滚轮 */
.infoScroll::-webkit-scrollbar {
    width: 4px;
}
.infoScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}
.infoScroll::-webkit-scrollbar-track {
    border-radius: 0;
    background: white;
}

把信息框外观改为圆角

/* 信息框圆角*/
.BMap_pop div:nth-child(1) div {
    border-radius: 8px 0 0 0;
}

.BMap_pop div:nth-child(3) {
    border-radius: 0 9px 0 0;
    border-top: 1px solid #ababab;
    border-right: 1px solid #ababab;
    border-left: 1px solid white;
    width: 23px !important;
    height: 24px !important;
    background-color: white;
}

.BMap_pop div:nth-child(3) div {
    display: none;
}

.BMap_pop div:nth-child(5) div {
    border-radius: 0 0 0 8px;
}

.BMap_pop div:nth-child(7) {
    border-radius: 0 0 9px 0;
    border-right: 1px solid #ababab;
    border-bottom: 1px solid #ababab;
    border-left: 1px solid white;
    width: 23px !important;
    height: 24px !important;
    background-color: white;
}

.BMap_pop div:nth-child(7) div {
    display: none;
}

效果如下
在这里插入图片描述

GrapeTaroSoda
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
百度地图自定义弹框、标注
qianghuafeifeifei的博客
05-09 5000
自定义地图显示内容（百度地图）、标注图片可以自己替换一下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
百度地图 自定义信息窗口 InfoBox.js
12-12
百度地图 自定义信息窗口 InfoBox.js 只做有效的信息共享
vue中使用百度地图自定义信息窗口
最新发布
qq_43651168的博客
04-12 3122
vue项目中通过百度地图API实现自定义信息窗口（通过infoBox实现自定义信息窗口）
百度地图开发探索 angular7 (typescript) 添加参考点、定位点与自定义弹窗
渐变强的小刘
01-15 1047
添加参考点并获取位置 话不多说，看图说话 分析一下此点和弹窗的组成： 1、上图的蓝色图标为一个marker 2、生成一个marker需要point，生成point需要两个坐标（经纬度） 3、上方的弹窗是依赖于marker生成的（弹窗自定义样式下面会有整理） // 参考点 referencePoint(e: any) { const point = new BMap.Point(e.point.lng, e.point.lat); // 创建point const poiIcon = n
百度地图自定义信息窗
12-20
文件主要包括InfoBox类库、一个Demo，实现了信息窗样式自定义，底层实际上是继承的BMap.Overlay
百度地图 Api v3.0 自定义信息窗体样式
zhang33565417的博客
05-10 5958
一、最终效果图 二、代码 var map = new BMap.Map("mapContainer"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // map.enableScrollWheelZoom(true); // map.setHeading(64.5); // 设置地图旋转角度 // map.setTilt(73); // 设置地图的倾斜角度 // map.set...
百度地图 javascript api自定义信息窗口
热门推荐
Dengzj_GISER
06-21 2万+
百度 js api中存在infoWindow的类，就是marker 点击后显示的信息窗口，他存在一下问题1.在map中只能显示一个infowindow，2.该信息窗口的样式无法修改，显示的内容具有局限性，虽然在2.0以后可以添加html元素，但是样式只能部分修改，比如他的背景色始终为白色。通过寻找信息窗口里的例子，发现在1.5版本的时候，提供过一个自定窗口的例子和相关的js文件该例子位于百度地图开...
使用百度地图自定义信息窗口InfoBox（可扩展个数）
07-11
使用开源类InfoBox.js 结合boorstrap样式开发出一款美观的信息窗口，不限制窗口大小可以扩展tab页。入口页面为home.html
百度地图类库 自定义信息窗口.zip
07-11
百度地图的infoBox。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。 基于Baidu Map API 1.2 。
百度地图类库 自定义信息窗口
04-28
在百度地图API中，InfoWindow是一种默认的弹出式窗口，用于展示地图上的标记点（Marker）或其他地理信息。然而，InfoWindow的样式和功能相对固定，有时无法满足开发者对个性化和扩展性的需求。因此，百度地图提供了...
百度地图自定义大头针（Marker）、自定义信息窗口（InfoBox）
10-16
此资源包含百度地图自定义大头针（Marker），自定义信息窗口（InfoBox），还包含点击Marker弹出自定义信息窗口等功能的demo
百度地图API自定义窗口InfoBox.js
06-03
百度地图API自定义窗口InfoBox.js
android实现百度地图自定义弹出窗口功能
09-04
总的来说，实现百度地图自定义弹出窗口功能涉及到对地图API的深入理解，以及自定义视图和事件处理的技巧。通过创建一个自定义的覆盖物类，并结合Activity的交互，我们可以灵活地定制地图上的信息窗口，满足各种业务...
百度地图 infoBox 自定义信息框
11-28
在本文中，我们将深入探讨如何使用百度地图API创建自定义的infoBox信息框，并实现自定义标注点模式。首先，让我们了解下基础概念。 百度地图API（Application Programming Interface）是百度提供的一套JavaScript库...
百度地图api html信息窗口,百度地图 javascript api自定义信息窗口
weixin_28949049的博客
06-17 945
百度 js api中存在infoWindow的类，就是marker 点击后显示的信息窗口，他存在一下问题1.在map中只能显示一个infowindow，2.该信息窗口的样式无法修改，显示的内容具有局限性，虽然在2.0以后可以添加html元素，但是样式只能部分修改，比如他的背景色始终为白色。通过寻找信息窗口里的例子，发现在1.5版本的时候，提供过一个自定窗口的例子和相关的js文件该例子位于百度地图开...
谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）
aixijuan6046的博客
08-04 239
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &lt...
自定义百度地图inforwindow弹出功能
weixin_42252416的博客
08-18 1812
自定义百度地图inforwindow弹出功能，并让其跟随点击点移动
vue自定义百度地图弹窗
atu1111的博客
05-20 1610
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
vue 使用百度地图+自定义消息窗口样式
qq_38327141的博客
05-12 2476
vue 使用百度地图+自定义消息窗口样式前言安装百度地图导入百度地图包百度地图组件封装准备百度地图组件函数封装百度地图页面加载完成后执行函数百度地图信息窗口样式自定义完整组件代码附上效果图 前言 好久没有提笔，这几天又遇到困难了,昨天vue的百度地图插件差点没把我弄死,现在问题得以解决,记录一下 另外提及一下,在写这个帖子时我才接触vue一周,本帖仅记录学习过程与分享结果,本人水平垃圾,不喜勿喷 安装百度地图 安装百度地图vue包 npm install vue-baidu-map 导入百度地图包
vue 百度地图自定义信息窗口
04-05
Vue百度地图自定义信息窗口，可以通过以下步骤实现： 1. 安装百度地图JavaScript API库 在Vue项目中，可以通过npm安装百度地图JavaScript API库： ``` npm install bmap-jsapi ``` 2. 在Vue组件中引入百度地图JavaScript API库 在Vue组件中，可以通过以下方式引入百度地图JavaScript API库： ``` import BMap from 'bmap-jsapi'; ``` 3. 创建百度地图实例和信息窗口 在Vue组件的`mounted`生命周期中，可以创建百度地图实例和信息窗口： ``` mounted() { const map = new BMap.Map('map-container'); const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); const marker = new BMap.Marker(point); map.addOverlay(marker); const infoWindow = new BMap.InfoWindow('<p>这是一个自定义信息窗口</p>'); marker.addEventListener('click', function(){ this.openInfoWindow(infoWindow); }); } ``` 在上述代码中，首先创建了一个BMap.Map实例，并定位到北京市中心点。然后创建了一个BMap.Marker实例，并添加到地图上。最后创建了一个BMap.InfoWindow实例，设置了自定义的信息窗口内容，并添加到BMap.Marker实例上。 4. 自定义信息窗口样式 为了自定义信息窗口样式，可以在创建BMap.InfoWindow实例时，传入一个样式对象，并通过CSS样式来设置信息窗口的样式： ``` const infoWindow = new BMap.InfoWindow(` <div class="info-window"> <h3 class="title">这是一个自定义信息窗口</h3> <p class="content">欢迎来到百度地图JavaScript API</p> </div> `, { width: 300, height: 150, enableMessage: false }); ``` 在上述代码中，通过HTML字符串构建了一个自定义信息窗口，并为其添加了CSS样式。 完整代码如下： ``` <template> <div id="map-container" style="width: 100%; height: 500px;"></div> </template> <script> import BMap from 'bmap-jsapi'; export default { mounted() { const map = new BMap.Map('map-container'); const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); const marker = new BMap.Marker(point); map.addOverlay(marker); const infoWindow = new BMap.InfoWindow(` <div class="info-window"> <h3 class="title">这是一个自定义信息窗口</h3> <p class="content">欢迎来到百度地图JavaScript API</p> </div> `, { width: 300, height: 150, enableMessage: false }); marker.addEventListener('click', function(){ this.openInfoWindow(infoWindow); }); } } </script> <style> .info-window { background-color: #fff; border: 1px solid #ccc; padding: 10px; font-size: 16px; } .title { font-size: 24px; margin-bottom: 10px; } .content { margin: 0; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值