百度地图API-实现底图切换

最新推荐文章于 2024-02-20 00:51:17 发布

手捧菊花茶

最新推荐文章于 2024-02-20 00:51:17 发布

阅读量1.5k

点赞数 1

分类专栏：百度地图Api 文章标签：百度 javascript 街景地图

本文链接：https://blog.csdn.net/weixin_45602368/article/details/119248337

版权

百度地图Api 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个关于百度地图底图切换的优化项目，通过JavaScript实现了一个简单的底图切换功能，允许用户选择显示或隐藏街道图。然而，作者提到在处理海量点渲染时遇到了性能问题，导致地图操作卡顿。寻求针对铁路业务的海量点优化方案，以提升地图的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底图切换

下一期项目有一项优化叫做底图切换，客户可以自己选择看不看见街道图这个东西，研究了一下，简单基本实现demo。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <button class="btn" onclick="handleChange()">切换</button>
    <div id="map" style="width: 100%; height: 100%;"></div>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=你的key"></script>
    <script>
        const tileLayer1 = new BMap.TileLayer();
        tileLayer1.getTilesUrl = function (tileCoord, zoom) {
            const x = tileCoord.x;
            const y = tileCoord.y;
            return "***.png";     //你的底图   本人截了一张百度的底图做demo
        };
        var mapType1 = new BMap.MapType('自定义地图', tileLayer1, { minZoom: 10, maxZoom: 25 });
        var map = new BMap.Map('map', { mapType: mapType1 });
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 21);
        map.enableScrollWheelZoom(true);
        var point = new BMap.Point(116.404, 39.915);
        var marker = new BMap.Marker(point);        // 创建标注   
        map.addOverlay(marker);
        var flag = 1
        function handleChange() {
            if (flag == 1) {
                console.log('111');
                map.setMapType(BMAP_NORMAL_MAP);
                flag = 2
            } else {
                flag = 1
                map.setMapType(mapType1);
            }
        }
    </script>
</body>

</html>

对百度地图的使用还是不那么灵活，导致做出的地图功能优化点太多。如果有大神有较好的海量点打点（业务方向是铁路）的优化方案，希望可以带带小弟。现在的海量点渲染出的地图人员点太卡顿了。