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

weixin_45353536

已于 2023-03-14 17:12:49 修改

阅读量897

点赞数

分类专栏： vue3+ts 文章标签：百度 javascript 前端

于 2023-03-14 16:46:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45353536/article/details/129532216

版权

当面临大量数据时，提高百度地图加载速度的方法包括：后端进行数据结构优化和经纬度过滤；注意百度地图的并发量限制，可能需要额外服务器支持；前端利用海量地图加载技术；区分点颜色以增强视觉效果；精确计算中心点；有效使用标注和地图查询；以及异步加载和按需加载的map.js组件封装。

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

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

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.47元/天解锁文章