百度地图添加自定义Marker+显示覆盖层次优先级+自定义图标+自定义图标文字+图标跳的+自定义信息窗口+按键切换地图样式+滚轮控件

淡淡的烟草味﹌ 2022-05-23 02:42 1050阅读 0赞

下面代码是项目内的，需要可以自行截取

创建地图

<div id="print"></div>
    <script type="text/javascript">
     // 卡片设置
        var opts = {
            width: 380,
            height: 180,
            opacity: 0.5,
            offset: new BMap.Size(0, -30),
            title: '<p style="font-size: 20px;color: #2ca90e;margin:0;margin-bottom: 20px;">这里是内容</p>',
            enableMessage: false,
        }
        map = new BMap.Map("print");
        var infoWindow = new BMap.InfoWindow("", opts);
        map.openInfoWindow(infoWindow, new BMap.Point("0", "0"));
        //默认获取全国
    </script>

map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

这是一个遍历循环的公共方法，lat,lon是坐标.

循环显示标注点，具体样式看方法内

state 是状态

data,是显示数据

I是循环的数

function addMarker(lat, lon, state, data, i) {
        // 根据设备状态显示不同的图标
        var animation = false; // 动画状态
        var icon = '';
        if (state == 00) { //待机
            icon = 'images/img/marker_daiji.png';  //待机图标
            console.log("待机")    
        } else if (state == 01) { //工作
            icon = 'images/img/marker_kaiji.png';   //工作中图标

animation = true;  // 此处是我用来判断状态，如果是工作状态 坐标图标回跳动

// 实例坐标点
        var point = new BMap.Point(lat, lon);

// 设置图标
        var myIcon = new BMap.Icon(icon, new BMap.Size(50, 65), {
            imageSize: new BMap.Size(35, 48), // 设置图标大小
        });

//设置坐标上显示的内容   data.con[i].remarks  是循环到当前I当前的内容remarks
        var label = new BMap.Label(data.con[i].remarks, {
            offset : new BMap.Size(9, 28),   //内容偏移量+
        });

// 设置 标注点的内容的样式
        label.setStyle({
            background:'none',border:'none',color : "#fff", fontSize : "5px"//只要对label样式进行设置就可达到在标注图标上显示数字的效果
        });

// 创建标注
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.setLabel(label);//显示标注点的内容

// 因为标注点是根据坐标来显示，如果叠加 会出现遮住，比如第三个标注点坐标比较小就回显示在后面，这个是强制按显示顺序显示  每个新坐标都在最前面
        marker.setTop('true');
        // 将标注添加到地图中
        map.addOverlay(marker);

//跳动的动画
        if (animation) {
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        }

// 信息窗口
        var opts = {
            width: 300,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title: data.con[i].name, // 信息窗口标题
        }

var infoWindow = new BMap.InfoWindow("地址：" + data.con[i].address, opts);  // 创建信息窗口对象
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    
    }

地图样式

// 按键事件 1 显示全国地图 2 3 4 5 6 7   //不同样式  自行体会
        $(document).keypress(function (event) {
            // alert(event.keyCode)
            console.log(event.keyCode)
            if (event.keyCode == 49) {
                window.location.href = "/wfg/addons/clinic_map/index.php?type=";
            }
            if (event.keyCode == 50) {
                // 切换主题 白色
                map.setMapStyle({style: 'normal'});
                MapStyle = 'normal';
    
            }
            if (event.keyCode == 51) {
                // 黑色
                map.setMapStyle({style: 'dark'});
                MapStyle = 'dark';
    
            }
            if (event.keyCode == 52) {
                // 黑色
                map.setMapStyle({style: 'grayscale'});
                MapStyle = 'grayscale';
    
            }
            if (event.keyCode == 53) {
                // 黑色
                map.setMapStyle({style: 'midnight'});
                MapStyle = 'midnight';
    
            }
            if (event.keyCode == 54) {
                // 黑色
                map.setMapStyle({style: 'redalert'});
                MapStyle = 'redalert';
    
            }
            if (event.keyCode == 55) {
                // 黑色
                map.setMapStyle({style: 'bluish'});
                MapStyle = 'bluish';
    
            }
        });

百度地图可以实现自定义窗口样式，教程稀缺，自己做了一个但是最后没采取删了 哈哈，

http://lbsyun.baidu.com/cms/jsapi/reference/jsapi\_reference.html\#a3b9

这是百度地图API类文件，那个自定义样式**这个里面是没有的，以后想起来在补充吧！**