修改 百度地图 infowindow 默认样式
1.百度 api 没有 提供可以修改 infowindow 默认样式的 方法。
如需修改,需要 自定义 替换 默认样式。
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="map"></div>
<!-- 弹窗内容 -->
<div id="cont">
<div id="close"></div>
<p id="title"></p>
<table border='0' cellpadding='3' cellspacing='1' >
<tr>
<td>值班领导</td>
<td>值班员</td>
<td>当班执勤科队</td>
<td>重要事项</td>
<td>通道开通</td>
</tr>
<tr>
<td>张站长</td>
<td>王小二</td>
<td>巡检科一队</td>
<td>无</td>
<td>自动12,人工4</td>
</tr>
<tr>
<td>李站长</td>
<td>张小四</td>
<td>巡检科二队</td>
<td>增加人工通道</td>
<td>自动12,人工4</td>
</tr>
</table>
</div>
</body>
<script>
var map = new BMap.Map("map", {
minZoom : 12,
maxZoom : 18
}); var point = new BMap.Point(114.1262324342, 22.5390750268);// 创建点坐标
map.centerAndZoom(point, 12);// 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。 // 默认位置
var ptlt = new BMap.Point(114.1622188176,22.5594612014);
var myIconlt = new BMap.Icon("icon.png", new BMap.Size(71, 95),{
anchor: new BMap.Size(-20, 10)
});
myIconlt.setImageSize(new BMap.Size(71, 95));
var markerlt = new BMap.Marker(ptlt, { icon: myIconlt }); // 创建标注
map.addOverlay(markerlt); //增加点 // 弹窗
markerlt.addEventListener("mouseover", function () {
$('#cont').css({'display':'','top': mouseYPosition + 'px','left': mouseXPosition + 'px'});
setModal('莲塘边检站勤务实时信息');
}); markerlt.addEventListener("mouseout", function () {
$('#cont').css({'display':'none'});
});
/*********************************************************************************/
$('#cont').on('mouseover',function(){
$('#cont').css({'display':''});
}) /*获取当前鼠标位置*/
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
} document.onmousemove = mouseMove; var mouseXPosition;
var mouseYPosition; function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
mouseXPosition = mousePos.x - 230;
mouseYPosition = mousePos.y - 170;
}
/*关闭弹出*/
$('#close').on('click',function(){
$('#cont').css({'display':'none'});
}); /*简单封装 设置title*/
function setModal(title){
$('#title').text(title);
}
</script>
</html>
修改 百度地图 infowindow 默认样式的更多相关文章
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- 百度地图infoWindow圆角处理
最近的一个项目用到了百度地图API里边的infoWindow弹框,但是百度自带的infoWindow弹框是个直角的矩形框,显示过于难看,于是有了将该框改为圆角的想法,但是API本身不支持样式的设置,所 ...
- 关于百度地图InfoWindow响应自定义布局点击事件
大概讲解: 在百度地图上显示一个marker,当marker被点击后,显示自定义的View.当自定义的View被点击后,响应不同Button的点击事件.被百度这个infowindo里面的view坑惨了 ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- 修改输入框placeholder的默认样式
一般网页中都用到input的placeholder属性,想让这个默认样式和网页保持一致,就需要重新设定样式,百度百度: :-moz-placeholder { / color: #000; opaci ...
- React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等
修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...
- 百度地图设置div样式宽高为百分比不显示地图
如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...
- 百度地图InfoWindow弹窗圆角
效果如下 使用CSS样式 /*地图标题*/ .BMap_pop div:nth-child(1) div { border-radius: 8px 0 0 0; } .BMap_pop div:nth ...
随机推荐
- 让 PHP COOKIE 立即生效(不用刷新就可以使用)
<?php function set_my_cookie($, $path = '', $domain = '') { $_COOKIE[$var] = $value; setcookie($v ...
- Python IO多路复用select模块
多路复用的分析实例:服务端.客户端 #服务端配置 from socket import * import time import select server = socket(AF_INET, SOC ...
- TOJ4537: n阶行列式
4537: n阶行列式 Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByteTotal Submit: 28 ...
- oracle中的dual表
dual表是和Oracle数据字典一起创建的.它实际上只包含dummy这一个column,并且只有一条记录,这条记录的值是X. X dual表的owner是SYS,但所有用户都可以访问它.Althou ...
- 九度oj 题目1475:IP数据包解析
题目描述: 我们都学习过计算机网络,知道网络层IP协议数据包的头部格式如下: 其中IHL表示IP头的长度,单位是4字节:总长表示整个数据包的长度,单位是1字节. 传输层的TCP协议数据段的头部格式如下 ...
- 九度oj 题目1458:汉诺塔III
题目描述: 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右边的杆上,条件是一次只能移动 ...
- 关于iOS 7的几个开源项目
MBSwitch MBSwitch是一个体现了iOS 7扁平化设计风格的UISwitch,支持iOS 7以下系统.允许使用者进行颜色的深度自定义,你可以定义边框的颜色,开/关的颜色以及按钮的颜色. ...
- 硅谷和国内的 iOS 开发到底有何不同?
前段时间在国内各大互联网公司转了一圈.与各位 iOS 业界大佬交流了之后,深感国内变化之大,敬佩诸位国内开发者的实力和韧劲.除此之外,我还发现硅谷和国内的 iOS 开发还是差别很大,且听我慢慢道来. ...
- HDU——1005Number Sequence(模版题 二维矩阵快速幂+操作符重载)
Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- HDU——1393Weird Clock(水题,注意题意)
Weird Clock Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...