引入百度地图

项目中引入百度地图，首先要注册成为百度地图开发者，然后获取ak密钥，直接按官网步骤就可以了，然后引入项目中

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

这种方法的原理，就是直接给全局widow对象添加一个BMap对象，从而可以使我们在已经加载api的页面的任何地方，使用百度地图的api。

百度地图初始化

百度地图初始化要注意，一定要给地图div一定的宽高，要在mounted函数中进行。

<script>
    mounted(){
        this.mapInit(this.point);
    },
    methods:{
         mapInit(point) {
            let vue = this;
            vue.map = new BMap.Map(vue.$refs.myMap);
            let marker = new BMap.Point(vue.point.longitude, vue.point.latitude);
            // 设置中心点以及缩放级别
            vue.map.centerAndZoom(marker, this.zoom?this.zoom:11);
            if(this.controlShow){
                vue.map.addControl(new BMap.NavigationControl());
                //添加缩放控件
            }
             //滚轮控制缩放
            vue.map.enableScrollWheelZoom(true); 
            //双击缩放控制
            vue.map.enableDoubleClickZoom(false);
            //自定义点标注样式 Icon()中有3个参数：
             String类型的图片地址url；Size类型的图片大小；
             和可选参数IconOptions
            if (this.addOverlay) {
                let myIcon = new BMap.Icon(img, new BMap.Size(202, 120), {
                    anchor: new BMap.Size(110, 65),
                })
                let marker = new BMap.Marker(point, {icon: myIcon});
                vue.map.addOverlay(marker);//打点
            }
            // 事件监听   获取点击点坐标 地图点击事件
            vue.map.addEventListener("click", (e) => {
                var center = vue.map.getCenter();
                if (vue.clickadd) {
                    this.addOneOverlay(e.point);
                }
                vue.$emit("mapClick", center);
            });
            // 设置地图风格样式  可自定义
            vue.map.setMapStyle(this.mapStyle);
           /**  tilesloaded 地图加载完成事件 */
            vue.map.addEventListener("tilesloaded", ()=>{
                let area = vue.map.getBounds();
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
            //对地图级别变化、移动结束后 监听获取可视区域
            vue.map.addEventListener("zoomend", ()=>{
                let area = vue.map.getBounds();
                let zoomSize = vue.map.getZoom();
                console.log(zoomSize);
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
            vue.map.addEventListener("moveend", ()=>{
                let area = vue.map.getBounds();
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
        },
    }
</script>

百度地图打点

百度地图打点三种：正常打点、海量点、点聚合。正常打点可以设置点坐标的样式，如图片，大小等，但是适合数量较少的打点需求，500到一千以内还不算太卡。对于大量点的渲染，可以用海量点完成，海量点不能自定义点icon，百度地图给了几种固定的样式供选择。百度地图还提供了点聚合功能，可以使一定区域内的点汇聚，显示更加直观。

需要注意的的是海量点、点聚合并没有在百度地图的默认包中，需要另外引入MarkerClusterer_min.js TextIconOverlay.js'

三种打点，代码如下：

// 创建点
createPoint(){
    this.points = [];
    let i = 0;
    for (; i < this.pointLength; i++) {
        let pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
        pt.id = i+1;
        this.points.push(pt);
    }
},  
//  正常打点
  addPoint(points){
           points.forEach(point => {
                let vue = this; 
                let myIcon = new BMap.Icon(img, new BMap.Size(202, 120), {
                     anchor: new BMap.Size(110, 65),
                 })
                 let marker = new BMap.Marker(point,{icon: myIcon});
        // 创建标注
                  marker.addEventListener('click', function(){ 
                           console.log(point,'click');
                            vue.$emit('pointClick',point); 
                  });
                  this.map.addOverlay(marker);
          });
 },
         //  海量点
 addMassivePoint(points,color){
     let vue = this;
    // 判断当前浏览器是否支持绘制海量点
     if (document.createElement('canvas').getContext) {  
           let options = {
                 size: BMAP_POINT_SIZE_SMALL, 
                 shape: BMAP_POINT_SHAPE_CIRCLE,
                color: color?color:'red',
           }
          let pointCollection = new BMap.PointCollection(points, options);
           // 初始化PointCollection 
          pointCollection.addEventListener('click', function (e) {
                 // console.log(e)
                 // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);
                 // 监听点击事件            
                let element = ''
                for (var i = 0; i < points.length; i++) {
                if (points[i].lng == e.point.lng && points[i].lat == e.point.lat)
                    {
                         element = points[i];
                         break;
                    } 
                 }
                 vue.$emit('pointClick',element);
            });
                    this.map.addOverlay(pointCollection);  // 添加Overlay 
      } else {
          alert('请在chrome、safari、IE8+以上浏览器查看本示例');
      }
}, 
       // 点聚合
 addAggreGationPoint(){
    console.log(BMapLib)
    this.createPoint(); 
    this.clearPonit();
    let markers = [];
    this.points.forEach(point => {
         let marker = new BMap.Marker(point);
            // 创建标注
         markers.push(marker)
   });
   this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers:markers});
},
        // 清除点标记
clearPonit(){
    this.map.clearOverlays();// 清除原标记
        if(this.markerClusterer){
        this.markerClusterer.clearMarkers()
    }
},

大数据打点优化方案

1.分批请求，分批打点

我们项目打点数据目前有二十多万，需求要二十万点位全部显示在地图中，需要解决两个问题，一个是二十万数据点前后端传输问题，二是二十万点位打点地图卡顿问题，经研究采用ajax轮询，分批请求，分批带点的方案，每次请求五千数据，五千数据打点，依次完成二十万数据的打点，除此之外，后端给的数据还需要精简，经纬度用x、y代替，这样二十万数据可以控制到10m左右。

2.只显示可视区域内的点位

如果项目没有需求要显示所有点的话，可以每次只显示可视区域内的点，百度有相关的函数，核心代码如下：

需要注意的是：计算可视区域的点位方法并不在百度地图默认包中，需要另外引入：importBMapLib_GeoUtils.js

  /**  tilesloaded 地图加载完成事件 */
    vue.map.addEventListener("tilesloaded", ()=>{ 
         let area = vue.map.getBounds();
         this.$emit("visibleArea",area);
         if(this.vevisibleFalg){
              this.visibleAreaPonit();
         }
    });
    //对地图级别变化、移动结束后 监听获取可视区域
    vue.map.addEventListener("zoomend", ()=>{
          let area = vue.map.getBounds();
          let zoomSize = vue.map.getZoom();
          console.log(zoomSize);
          this.$emit("visibleArea",area);
          if(this.vevisibleFalg){
             this.visibleAreaPonit();
          }
    });
    vue.map.addEventListener("moveend", ()=>{
          let area = vue.map.getBounds();
          this.$emit("visibleArea",area);
          if(this.vevisibleFalg){
              this.visibleAreaPonit();
          }
    });
// 设置地图缩放级别
  setZoom(zoom){
      this.map.setZoom(zoom);
  }, 
  visibleAreaPonit(first){
      if(first)this.setZoom(11);
      this.createPoint();
      this.clearPonit();
      this.vevisibleFalg = true;
      let j = 0;
      for(let i=0;i<this.points.length;i++){ 
          let point = this.points[i]; 
          let marker = new BMap.Marker(point);
          let result = BMapLib.GeoUtils.isPointInRect(point, this.map.getBounds());
          // if(result == true && j<10)
          if(result == true)
          {
              this.map.addOverlay(marker);
              ++j;
          }
          // else if(result == true && j>=10)
          // { 
          //     ++j;
          //     this.map.removeOverlay(marker);
          // }
          else this.map.removeOverlay(marker); 
     }
  }

当数据达到一定量级以后，个人认为一次性显示所有点其实没什么意义，用户看到的也只是密密麻麻的一片，没有任何价值。具体项目如何打点，这取决于具体项目需求。

demo完整代码如下：

<template>
    <div class="map-point">
        <div class="button">
            <el-input class="input-number" v-model="pointLength"
                 placeholder="请输入生成点数量" type="number">
            </el-input>
            <el-select v-model="select_data.value" 
               :placeholder="select_data.placeholder"> 
               <el-option
                    v-for="item in select_data.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button @click="addOneOverlayBatch">打点</el-button>
            <el-button @click="addAggreGationPoint">点聚合</el-button>
            <el-button @click="clearPonit">清除点</el-button>
            <el-button @click="visibleAreaPonit(true)">可见区域打点</el-button>
        </div>
        <div ref="myMap" :style="mapStyle" id="myMap" class="myMap"></div>
    </div>
</template>
<script>
import '../assets/js/mapJs/MarkerClusterer_min.js'
import '../assets/js/mapJs/TextIconOverlay.js'
import '../assets/js/mapJs/BMapLib_GeoUtils.js'
import img from "../assets/imgs/marker.png";
export default {
    name:'mapPoint',
    props:{
        controlShow:{// 是否显示缩放控件
            type:Boolean,
            default:false,
        },
        point:{           // 中心点
            type:Object,
            default(){
                return {
                    longitude: '105.000',
                    latitude: '38.000'
                }
            } 
       },
        clickadd:{        // 点击打点
            type:Boolean,
            default:false,
        },
        zoom:{           // 缩放级别 
           type:Number,
            default:5
        }
    },
    data(){
        return {
            map: '',
            mapStyle: {style: "midnight"},
            pointLength:1000,
            points:[],
            select_data:{
                placeholder:'请选择打点模式',
                options:[
                    {value:'1',label:'正常点'},
                    {value:'2',label:'海量点'},
                ],
                value:'2',
            },
            vevisibleFalg:false,
        }
    },
    mounted(){
        this.mapInit(this.point);
    },
    methods:{
        mapInit(point) {
            let vue = this;
            vue.map = new BMap.Map(vue.$refs.myMap);
            let marker = new BMap.Point(vue.point.longitude, vue.point.latitude);
            // 设置中心点以及缩放级别
            vue.map.centerAndZoom(marker, this.zoom?this.zoom:11);
            if(this.controlShow){
                vue.map.addControl(new BMap.NavigationControl());    //添加缩放控件
            }
            vue.map.enableScrollWheelZoom(true);                 //滚轮控制缩放 
           vue.map.enableDoubleClickZoom(false);                //双击缩放控制 
           //自定义点标注样式 Icon()中有3个参数：String类型的图片地址url；
           //Size类型的图片大小；和可选参数IconOptions
            if (this.addOverlay) {
                let myIcon = new BMap.Icon(img, new BMap.Size(202, 120), {
                    anchor: new BMap.Size(110, 65),
                })
                let marker = new BMap.Marker(point, {icon: myIcon});
                vue.map.addOverlay(marker);      //打点
            }
            // 事件监听   获取点击点坐标 地图点击事件
            vue.map.addEventListener("click", (e) => {
                var center = vue.map.getCenter();
                if (vue.clickadd) {
                    this.addOneOverlay(e.point);
                }
                vue.$emit("mapClick", center);
            });
            // 设置地图风格样式  可自定义
            vue.map.setMapStyle(this.mapStyle);
            /**  tilesloaded 地图加载完成事件 */
            vue.map.addEventListener("tilesloaded", ()=>{
                let area = vue.map.getBounds();
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
            //对地图级别变化、移动结束后 监听获取可视区域
            vue.map.addEventListener("zoomend", ()=>{
                let area = vue.map.getBounds();
                let zoomSize = vue.map.getZoom();
                console.log(zoomSize);
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
            vue.map.addEventListener("moveend", ()=>{
                let area = vue.map.getBounds();
                this.$emit("visibleArea",area);
                if(this.vevisibleFalg){
                    this.visibleAreaPonit();
                }
            });
            // 坐标是否在可视区域范围内
            // let result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
        }, 
       // 创建点
        createPoint(){
            this.points = [];
            let i = 0;
            for (; i < this.pointLength; i++) {
                let pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
                pt.id = i+1;
                this.points.push(pt);
            }
        },
        // 批量打点
        addOneOverlayBatch(){
            this.createPoint();
            this.clearPonit(); 
            if(this.select_data.value === '1')           // 正常打点
            {
                this.addPoint(this.points) 
            }else if(this.select_data.value === '2')       // 海量点
            {
                this.addMassivePoint(this.points)
            }
        },
        //  正常打点
        addPoint(points){
                points.forEach(point => {
                      let vue = this;
                      let myIcon = new BMap.Icon(img, new BMap.Size(202, 120), {
                            anchor: new BMap.Size(110, 65),
                      })
                      let marker = new BMap.Marker(point,{icon: myIcon});        // 创建标注
                      marker.addEventListener('click', function(){
                            console.log(point,'click');
                            vue.$emit('pointClick',point);
                      });
                      this.map.addOverlay(marker);
               });
        },
         //  海量点
        addMassivePoint(points,color){
                let vue = this;
                if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                    let options = {
                        size: BMAP_POINT_SIZE_SMALL,
                        shape: BMAP_POINT_SHAPE_CIRCLE, 
                        color: color?color:'red',
                    }
                    let pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                    pointCollection.addEventListener('click', function (e) {
                        // console.log(e)
                        // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);
                       // 监听点击事件
                        let element = '' 
                       for (var i = 0; i < points.length; i++) {
                            if (points[i].lng == e.point.lng && points[i].lat == e.point.lat) {
                                element = points[i];
                                break;
                            }
                        }
                        vue.$emit('pointClick',element);
                    });
                    this.map.addOverlay(pointCollection);  // 添加Overlay
                } else {
                    alert('请在chrome、safari、IE8+以上浏览器查看本示例');
                } 
       },
        // 点聚合 
       addAggreGationPoint(){
            console.log(BMapLib)
            this.createPoint();
            this.clearPonit();
            let markers = [];
            this.points.forEach(point => {
                    let marker = new BMap.Marker(point);        // 创建标注 
                     markers.push(marker)
            });
            this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers:markers});
        }, 
       // 清楚点标记
        clearPonit(){
            this.map.clearOverlays();// 清除原标记 
            if(this.markerClusterer){ 
               this.markerClusterer.clearMarkers()
            } 
        },
        // 设置地图缩放级别
        setZoom(zoom){
            this.map.setZoom(zoom);
        },
        visibleAreaPonit(first){ 
           if(first)this.setZoom(11);
            this.createPoint();
            this.clearPonit();
            this.vevisibleFalg = true;
            let j = 0;
            for(let i=0;i<this.points.length;i++){
                let point = this.points[i];
                let marker = new BMap.Marker(point);
                  let result = BMapLib.GeoUtils.isPointInRect(point, this.map.getBounds());
                // if(result == true && j<10)
                 if(result == true)
                 {
                    this.map.addOverlay(marker);
                    ++j;
                }
                else this.map.removeOverlay(marker);
            }
        }
    },
    }
</script>
<style lang="less" scoped>
.map-point{
    .button{
        text-align: left;
        margin-bottom: 10px;
        .input-number{
            width: 200px;
            margin-right: 10px;
        }
    }
    .myMap{
        width: 1000px;
        height: 800px;
    }
}
</style>

--------------------------------------------------------------------------------

git地址：https://github.com/aicai0/test_components.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！！