下面是记录我关于百度api 一系列的尝试 和不停踩坑的记录

百度api

要使用百度api 就需要提前去百度申请key

1. 百度地图官网 lbsyun.baidu.com/
2. 进入 jsv3 开始注册账号

lbsyun.baidu.com/index.php?t…

注册账号

创建应用

申请好密钥之后

1.在 /pubilc/index.html 中全局引入 ak 用自己的

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=BYlF**************"></script>

2.在vue.config.js中全局定义 打包时不打包这个第三方包 优化

3.在页面中正常使用，创建实例，设置中心点，添加控件等 使用

4.marker 标记点 引入图片

项目需求： 百度地图 + 飞线

实现方案： 百度api +mapv +mapvgl

实现原因： 代码更简洁方便

方法： npm i mapv mapvgl

注！！

我没有采用 vue-baidu-map 插件 ，是它渲染图层总是有问题，飞线出不来 （也有可能是我自己的问题，我不会用）

因为我需要用到飞线，而飞线这个属于THREE的部分，我使用了mapvgl，这个单纯的百度地图jsv3 实现不了，需要用到jsGL的

所以第一个需要修改的就是上述在 /pubilc/index.html 中引入的 js代码 ，需要添加 type 属性

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=BYlFHGd***********"></script>

注！！ 这里必须type 否则使用不了mapvgl

这个是具体的实现代码

<template>
    <div id="container"></div>
    
</template>

<script>
import * as mapv from "mapv";
import * as mapvgl from "mapvgl";
const mapvglThree = require('mapvgl/dist/mapvgl.threelayers.min');
export default {
    data() {
        return {
            map: ""
        };
    },
    mounted() {
        this.initBmap();
    },
    methods: {
        initBmap() {
            var map = new BMapGL.Map("container", {
                coordsType: 5, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
                // 指定完成后API将以指定的坐标类型处理您传入的坐标
                // enableRotate: false,
                // enableTilt: false
            }); // 创建地图实例
            var point = new BMapGL.Point(113.41, 29.58); // 创建点坐标
            map.centerAndZoom(point, 8);
            map.enableScrollWheelZoom(true)
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            map.addControl(cityCtrl);

            // map.setHeading(64.5);   //设置地图旋转角度
            // map.setTilt(73);       //设置地图的倾斜角度
            this.createMapvgl(map)

        },
        // mpv + mpvgl 实现飞线  要求 百度地图链接 + type="webgl"
        createMapvgl(map) {
            var citys = [
                "信阳市",
                "襄阳市",
                "荆门市",
                "恩施",
                "岳阳市",
                "咸宁市",
                "黄石市",
                "孝感市",
                "随州市",
                "荆州市",
                "南昌市",
                "宜昌市",
                "武汉市",
            ];
            var randomCount = 100; // 模拟的飞线的数量
            let data = [];
            for (let i = 0; i < citys.length; i++) {
                //初始化数据源
                //构造函数
                var fromCenter = mapv.utilCityCenter.getCenterByCityName(citys[citys.length - 1]);
                var toCenter = mapv.utilCityCenter.getCenterByCityName(citys[i]);
                //生成贝塞尔曲线
                var curve = new mapvgl.BezierCurve({
                    start: [fromCenter.lng, fromCenter.lat],
                    end: [toCenter.lng, toCenter.lat],
                });
                //生成贝塞尔曲线坐标集
                var curveData = curve.getPoints();
                // console.log(curveData)
                data.push({
                    geometry: {
                        type: "LineString",
                        coordinates: curveData,
                    },
                    properties: {
                        count: Math.random()
                    }
                });
            }

            // 2. 创建MapVGL图层管理器
            var view = new mapvgl.View({
                map: map,
            });

            var lineLayer = new mapvgl.LineLayer({
                blend: "lighter",
                width: 2,
                color: "rgba(33, 242, 214, 0.6)",
            });
            view.addLayer(lineLayer);
            lineLayer.setData(data);

            var flyLayer = new mapvgl.LineLayer({
                blend: "lighter",
                color: "rgba(255, 71, 26, 0.9)",
                width: 4,
                animation: true,
                duration: 2, // 循环时间2s
                trailLength: 0.8, // 拖尾长度占间隔的0.8
                interval: 0.2, // 粒子长度占线整体长度的0.2
            });
            view.addLayer(flyLayer);
            flyLayer.setData(data);

            // 飞线
            var layer = new mapvglThree.FlyLineLayer({
                style: 'chaos',
                step: 0.3,
                color: 'rgba(33, 242, 214, 0.3)',
                textureColor: function (data) {
                    return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
                },
                textureWidth: 20,
                textureLength: 10
            });

            // view.addLayer(layer);
            // layer.setData(data);
        }

    },
}
</script>

<style lang="scss" scoped>
#container {
    height: 700px;
}
</style>

注！！

1. 需要注意：mapvglThree 的引入，我去翻了源码才知道是这样的引入，直接引入拿不到，页面无法渲染 ！！！

const mapvglThree = require('mapvgl/dist/mapvgl.threelayers.min');

2. 百度地图打包之后出现的问题

这里可以去改 白名单

3. 项目引入百度地图api报有警告

A parser-blocking, cross site (i.e. different eTLD+1) script, api.map.baidu.com/getscript?t…您的密钥&services=&t=, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.

See www.chromestatus.com/feature/571… for more details.

翻译：

通过document.write调用一个解析器阻塞，跨站点(即不同的eTLD+1)脚本，api.map.baidu.com/getscript?t…“&services=&t=”。由于网络连接不良，对该脚本的网络请求可能会在当前或将来的页面加载中被浏览器阻止。如果在此页面加载中被阻塞，将在随后的控制台消息中进行确认。

这里我尝试了三种方法 ，最后一个解决了

第三种方法：

<!-- <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> --> 

<script type="text/javascript" src="http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=您的密钥;services=&t="></script> 

<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/webgl/10/bmap.css">