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

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

创建地图

<!--百度地图显示区域-->
<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类文件，那个自定义样式这个里面是没有的，以后想起来在补充吧！

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

猜你喜欢