百度地图开发(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 !


相关文章
|
1天前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
5 0
|
1天前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
5 0
|
1天前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
6 1
|
4天前
|
数据采集 JavaScript 前端开发
使用Colly库进行高效的网络爬虫开发
使用Colly库进行高效的网络爬虫开发
|
29天前
|
消息中间件 网络协议
【消息队列开发】 设计网络通信协议
【消息队列开发】 设计网络通信协议
|
2月前
|
安全 网络安全 量子技术
网络安全与信息安全:漏洞、加密技术与安全意识的探索安卓应用开发中的内存管理策略
【5月更文挑战第31天】随着互联网的普及,网络安全问题日益严重。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面的问题,以期提高公众对网络安全的认识和防范能力。
|
2月前
|
安全 网络安全 Android开发
安卓应用开发:打造流畅的用户体验网络安全与信息安全:防御前线的技术与意识
【5月更文挑战第29天】在移动应用市场中,用户对流畅体验的要求日益提高。针对安卓平台,开发者需深入理解系统原理、内存管理及性能优化策略。本文旨在探讨安卓应用开发中的关键技术和工具,包括布局优化、内存泄漏防治以及使用Kotlin语言的优势,以期为读者提供实用的性能提升指导和实践建议。
|
2月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
2月前
|
前端开发 网络安全
【XSS平台】使用,网络安全开发必学
【XSS平台】使用,网络安全开发必学
|
2月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析