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 默认样式的更多相关文章

  1. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  2. 百度地图infoWindow圆角处理

    最近的一个项目用到了百度地图API里边的infoWindow弹框,但是百度自带的infoWindow弹框是个直角的矩形框,显示过于难看,于是有了将该框改为圆角的想法,但是API本身不支持样式的设置,所 ...

  3. 关于百度地图InfoWindow响应自定义布局点击事件

    大概讲解: 在百度地图上显示一个marker,当marker被点击后,显示自定义的View.当自定义的View被点击后,响应不同Button的点击事件.被百度这个infowindo里面的view坑惨了 ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  6. 修改输入框placeholder的默认样式

    一般网页中都用到input的placeholder属性,想让这个默认样式和网页保持一致,就需要重新设定样式,百度百度: :-moz-placeholder { / color: #000; opaci ...

  7. React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

    修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...

  8. 百度地图设置div样式宽高为百分比不显示地图

    如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...

  9. 百度地图InfoWindow弹窗圆角

    效果如下 使用CSS样式 /*地图标题*/ .BMap_pop div:nth-child(1) div { border-radius: 8px 0 0 0; } .BMap_pop div:nth ...

随机推荐

  1. 用Python表达对Android的想法

    组员:喻航,张子东 视频:点我 #DISCARD ANDROID TODAY! import turtle import turtle as gui #setting turtle.screensiz ...

  2. 九度oj 题目1368：二叉树中和为某一值的路径

    题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 输入: 每个测试案例包括n+1行: 第一行为2 ...

  3. DS博客作业——树

    DS博客作业--树 1.本周学习总结 1.思维导图 2.谈谈你对树结构的认识及学习体会. 在树这一章节,我们学习的是二叉树的算法. 树的构建:一种是直接给树的顺序存储结构的字符串,一种是通过先序遍历和 ...

  4. 一句话学Java——Java重载和重写

    概念:重载是指两个不同的函数有相同的名称,可以是在本类之中的函数之间的重载,也可以是子类和父类的函数之间的函数重载. 重写:只能是子类重写父类的函数.这是多态的基础. 重写的规则:     参数:重写 ...

  5. 【bzoj3505】[Cqoi2014]数三角形 容斥原理

    题目描述 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. 输入 输入一行,包含两个空格分隔的正整数m和n. 输出 输出一个 ...

  6. 刷题总结——怪题（ssoj费用流）

    题目: 题目描述 给出一个长度为 n 的整数序列 hi ,现在要通过一些操作将这个序列修改为单调不降序列,即  hi≤hi+1 . 可以用的操作有 m 种,第 i 种操作可以通过支付 ci 的代价将一 ...

  7. mybatis学习（九）——动态sql

    MyBatis 的强大特性之一便是它的动态 SQL.可以根据不同条件拼接 SQL 语句. 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似.主要由以下几种元素. if wh ...

  8. bzoj 5056: OI游戏 最短路树的计数

    OI游戏 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 196  Solved: 159[Submit][Status][Discuss] Descrip ...

  9. C语言第三题

    1.完成char *p,char *q 的字符串比较,相等返回1,错误返回-1 2.用户需要计算的2个20位数数字的加法,写程序实现让用户输入两个20位以上的数字并且相加,输出结果

  10. 两个VLC实现播放串流测试 (转)

    实现原理: 一个VLC打开视频文件发布串流(格式HTTP.RTP.RTSP等),另一个VLC打开串流播放 发布串流步骤: 1.菜单“媒体”->“流”,先添加视频文件.选择“串流”,如下图: 2. ...