百度地图海量点时让地图加载更快

很多数据时如何让百度地图加载得更快?

在这里插入图片描述
1.后端数据结构优化
搞成一个二位数组
![在这里插入图片描述](https://img-blog.csdnimg.cn/fcfedd9ea84245d5a33b7846a6557594.png在这里插入图片描述

2.后台过滤经纬度
经纬度为空的和经纬度不在中国范围内的全部过滤掉
3.百度地图的并发量每天为0.5万次,如果数据过多,后台需要单独再使用一个服务器ak
4.前端使用海量地图加载
https://www.cnblogs.com/googlegis/p/14690053.html
5.区分点的颜色
https://www.jianshu.com/p/2fb2d84fb206
6.确定中心点

//参数数组points的每一项为每一个点的:纬度,精度
//返回中心点的数组[纬度,精度]

export function getPointsCenter(points) {
   
  const point_num = points.length; //坐标点个数
  let X = 0,
    Y = 0,
    Z = 0;
  for (let i = 0; i < points.length; i++) {
   
    const point = points[i];
    const lng = (point[3] * Math.PI) / 180;
    const lat = (point[4] * Math.PI) / 180;
    const x = Math.cos(lat) * Math.cos(lng);
    const y = Math.cos(lat) * Math.sin(lng);
    const z = Math.sin(lat);
    X += x;
    Y += y;
    Z += z;
  }
  X = X / point_num;
  Y = Y / point_num;
  Z = Z / point_num;
  const tmp_lng = Math.atan2(Y, X);
  const tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
  return [(tmp_lng * 180) / Math.PI, (tmp_lat * 180) / Math.PI];
}

7.标注地图和地图查询

<div class="search">
          <el-input
            class="search-input"
            v-model="searchMap"
            :clearable="true"
            placeholder="请输入网关名称/编码/地址"
          ></el-input>
          <el-button
            class="search-button"
            type="primary"
            @click="handleClickSearch"
            >搜索</el-button
          >
        </div>
        <div class="inner-total">
          <!-- <div class="title">标注</div> -->
          <div class="inner-total-list">
            <div class="item" v-for="(item, index) in pointNums" :key="index">
              <div
                :style="{ backgroundColor: item.color }"
                class="item-color"
              ></div>
              <div :style="{ color: item.status === '在线' ? 'green' : 'red' }">
                {
   {
    item.status }}
              </div>
              <div class="item-type">{
   {
    item.type }}</div>
              <div>{
   {
    item.total + "个" }}</div>
            </div>
          </div>
        </div>
 <baidu-map
      :data="mapData"
      @onClickMap="handleClickMapPoint"
      style="height: 600px"
    ></baidu-map>
function handleClickSearch() {
   
  const arr = [];
  data.mapData.forEach(item => {
   
    const reg = new RegExp(data.searchMap);
    if (reg.test(item[1]) || reg.test(item[2]) || reg.test(item[0])) {
   
      arr.push(item);
    }
  });
  if (!arr.length) {
   
    errorMessage("查询的信息不存在");
    return;
  }
  data.mapData = arr;
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图海量标注卡顿可能是由于以下几个原因导致的: 1. 数据量过大:当标注数量过多时,地图加载和渲染的速度会变慢,从而导致卡顿。这可能是因为您在地图上添加了大量的标注,超出了地图的处理能力。 2. 硬件性能不足:如果您的设备硬件性能较低,例如内存不足或者处理器速度较慢,也会导致地图卡顿。在这种情况下,建议您尝试在性能更好的设备上使用百度地图。 3. 网络问题:如果您的网络连接不稳定或者速度较慢,地图数据加载的速度会受到影响,从而导致卡顿。请确保您的网络连接良好,并尝试在网络环境较好的情况下使用百度地图。 解决这个问题的方法有以下几种: 1. 数据分批加载:如果您需要展示大量的标注,可以考虑将数据进行分批加载,只加载当前视图范围内的标注,而不是一次性加载全部数据。 2. 使用聚合功能:百度地图提供了标注聚合功能,可以将附近的标注合并成一个聚合,从而减少标注的数量,提高地图加载和渲染速度。 3. 优化代码逻辑:检查您的代码逻辑是否存在性能瓶颈或者不必要的计算操作,尽量减少不必要的操作,优化代码性能。 4. 更新设备或网络环境:如果您的设备硬件性能较低或者网络环境较差,考虑升级设备或者改善网络环境,以提高地图加载和渲染速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值