百度地图开发(8):地图覆盖物实现纵横交错的交通网络

简介: 百度地图开发(8):地图覆盖物实现纵横交错的交通网络

强制格式化百度标签样式

.BMapLabel {
    background: none !important;
    border: none !important;
}


标签样式表

.shu_txt {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 9px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5;
    text-decoration: none;
    transform: rotate(52deg);
    -webkit-transform: rotate(52deg);
    -moz-transform: rotate(52deg);
    -ms-transform: rotate(52deg);
}
.heng_txt {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #f5f5f5, 1px 1px 2px #d2d2d2;
    text-decoration: none;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}


初始化地图

    var map = new BMap.Map("allmap", {enableMapClick: false});
    var point = new BMap.Point(113.239654, 22.015262);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom();
    map.setMapType(BMAP_SATELLITE_MAP);


添加覆盖物

  // 创建polyline对象(港珠澳大桥延长线)
    var gzadq = [
        new BMap.Point(113.043895, 22.024912),
        new BMap.Point(113.061718, 22.028798),
        new BMap.Point(113.077384, 22.029066),
        new BMap.Point(113.107567, 22.033891),
        new BMap.Point(113.117484, 22.035097),
        new BMap.Point(113.128695, 22.038849),
        new BMap.Point(113.134157, 22.042065),
        new BMap.Point(113.137606, 22.044611),
        new BMap.Point(113.144218, 22.047827),
        new BMap.Point(113.145943, 22.047961),
        new BMap.Point(113.14853, 22.049435),
        new BMap.Point(113.152698, 22.049569),
        new BMap.Point(113.155429, 22.051043),
        new BMap.Point(113.159166, 22.052115),
        new BMap.Point(113.164125, 22.053878),
        new BMap.Point(113.174904, 22.056156),
        new BMap.Point(113.185109, 22.054548),
        new BMap.Point(113.198763, 22.051064),
        new BMap.Point(113.205806, 22.052538),
        new BMap.Point(113.226359, 22.057228),
        new BMap.Point(113.234264, 22.056156),
        new BMap.Point(113.258842, 22.05361),
        new BMap.Point(113.26416, 22.053074),
        new BMap.Point(113.27264, 22.054012),
        new BMap.Point(113.275515, 22.05562),
        new BMap.Point(113.275371, 22.055486),
        new BMap.Point(113.282126, 22.056424),
        new BMap.Point(113.289025, 22.057496),
        new BMap.Point(113.302536, 22.057898),
        new BMap.Point(113.310728, 22.054816),
        new BMap.Point(113.32122, 22.048786),
        new BMap.Point(113.33545, 22.046374),
        new BMap.Point(113.341055, 22.04959),
        new BMap.Point(113.347523, 22.051868),
        new BMap.Point(113.367357, 22.05763),
    ];
    var gzadqline = new BMap.Polyline(gzadq, {
        enableEditing: false,//是否启用线编辑,默认为false
        enableClicking: true,//是否响应点击事件,默认为true
        strokeWeight: '4',//折线的宽度,以像素为单位
        strokeOpacity: 1,//折线的透明度,取值范围0 - 1
        strokeColor: "#414aff" //折线颜色
    });
    map.addOverlay(gzadqline);
    var gsContent =
            "<div class='heng_txt'>" +
            "<a>港珠澳大桥延长线</a>" +
            "</div>";
    for (var i = 0; i < 3; i++) {
        var xypo = [new BMap.Point(113.190786, 22.052538), new BMap.Point(113.328191, 22.04959), new BMap.Point(113.069048, 22.027994)];
        var labeltxt1 = new BMap.Label(gsContent, {offset: new BMap.Size(0, 0), position: xypo[i]});
        map.addOverlay(labeltxt1);
    }


lockdatav Done !


相关文章
|
2月前
|
Linux 开发工具 Android开发
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
ijkplayer是由Bilibili基于FFmpeg3.4研发并开源的播放器,适用于Android和iOS,支持本地视频及网络流媒体播放。本文详细介绍如何在新版Android Studio中导入并使用ijkplayer库,包括Gradle版本及配置更新、导入编译好的so文件以及添加直播链接播放代码等步骤,帮助开发者顺利进行App调试与开发。更多FFmpeg开发知识可参考《FFmpeg开发实战:从零基础到短视频上线》。
190 2
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
|
1月前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
27天前
|
存储 网络协议 物联网
C 语言物联网开发之网络通信与数据传输难题
本文探讨了C语言在物联网开发中遇到的网络通信与数据传输挑战,分析了常见问题并提出了优化策略,旨在提高数据传输效率和系统稳定性。
|
2月前
|
XML 开发工具 Android开发
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
ExoPlayer最初是为了解决Android早期MediaPlayer控件对网络视频兼容性差的问题而推出的。现在,Android官方已将其升级并纳入Jetpack的Media3库,使其成为音视频操作的统一引擎。新版ExoPlayer支持多种协议,解决了设备和系统碎片化问题,可在整个Android生态中一致运行。通过修改`build.gradle`文件、布局文件及Activity代码,并添加必要的权限,即可集成并使用ExoPlayer进行网络视频播放。具体步骤包括引入依赖库、配置播放界面、编写播放逻辑以及添加互联网访问权限。
177 1
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
|
3月前
|
机器学习/深度学习 算法 TensorFlow
交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面
交通标志识别系统。本系统使用Python作为主要编程语言,在交通标志图像识别功能实现中,基于TensorFlow搭建卷积神经网络算法模型,通过对收集到的58种常见的交通标志图像作为数据集,进行迭代训练最后得到一个识别精度较高的模型文件,然后保存为本地的h5格式文件。再使用Django开发Web网页端操作界面,实现用户上传一张交通标志图片,识别其名称。
124 6
交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面
|
4月前
|
安全 网络安全 Android开发
安卓与iOS开发:选择的艺术网络安全与信息安全:漏洞、加密与意识的交织
【8月更文挑战第20天】在数字时代,安卓和iOS两大平台如同两座巍峨的山峰,分别占据着移动互联网的半壁江山。它们各自拥有独特的魅力和优势,吸引着无数开发者投身其中。本文将探讨这两个平台的特点、优势以及它们在移动应用开发中的地位,帮助读者更好地理解这两个平台的差异,并为那些正在面临选择的开发者提供一些启示。
130 56
|
3月前
|
算法
基于GA遗传优化的离散交通网络双层规划模型设计matlab仿真
该程序基于GA遗传优化设计了离散交通网络的双层规划模型,以路段收费情况的优化为核心,并通过一氧化碳排放量评估环境影响。在MATLAB2022a版本中进行了验证,显示了系统总出行时间和区域排放最小化的过程。上层模型采用多目标优化策略,下层则确保总阻抗最小,实现整体最优解。
|
4月前
|
C++
C++ Qt开发:QUdpSocket网络通信组件
QUdpSocket是Qt网络编程中一个非常有用的组件,它提供了在UDP协议下进行数据发送和接收的能力。通过简单的方法和信号,可以轻松实现基于UDP的网络通信。不过,需要注意的是,UDP协议本身不保证数据的可靠传输,因此在使用QUdpSocket时,可能需要在应用层实现一些机制来保证数据的完整性和顺序,或者选择在适用的场景下使用UDP协议。
198 2
|
4月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
167 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
Qt开发网络嗅探器02
Qt开发网络嗅探器02
下一篇
DataWorks