百度地图api线路规划问题

Question

使用百度地图api时的问题

我想要的效果是这样的

这是官网给出的案例 我使用的是umi 没有index.html 所以按照网上配置：

```javascript
1.在src目录下新建plugins文件夹 并新建customPlugins文件写入以下代码

export default (api, opts) => {
  // 在HTML尾部添加脚本
  api.headScripts(() => {
    return [
      {
        // 百度地图
        type: 'text/javascript',
        src: '//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥',
      },
    ];
  });
};

2.在.umirc.ts文件中配置以下代码

import { defineConfig } from 'umi';

export default defineConfig({
    plugins: ['./plugins/customPlugin.js'],
  });

我想要的效果是我选择了起点和终点之后就可以为我规划两点之间的路线 按照官网的代码

            var map = new BMapGL.Map("container");
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

            var p1 = new BMapGL.Point(116.301934,39.977552);
            var p2 = new BMapGL.Point(116.508328,39.919141);

            var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            driving.search(p1, p2);

这样做之后我的页面就会空白并报出错误

我使用的是react-bmapgl中的Map组件 相关代码如下

<div className='container'>
            <Map
              style={{ height: 563,width:455,overflow:'hidden',position:'relative' }}
              center={new BMapGL.Point(116.404449, 39.914889)}
              zoom={15}
              heading={2}
              tilt={10}
              ref={mapRef}
              onClick={e => clickMapEvent(e)}
              className='baiduMap'
              enableScrollWheelZoom>
                <CityListControl className='citylistcontrol' /> 
            </Map>
</div>

我在网上查找过这个错误 大都是说dom加载顺序不对 会先执行head中的js代码
或者说 js代码未执行，html代码先一步执行，所以我调整了放在文档尾部的

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
脚本，
使用umi约定的在pages目录下的document.ejs模板中向头部添加了该脚本

可以看到在head中已经添加了脚本 但问题仍未解决 并且报错一致

所以想请教一下如何在umi中实现官网的线路规划功能

Answer 1

【以下回答由 GPT 生成】

问题分析

根据提供的代码和描述，我们可以得出以下问题：

1. 使用了一个自定义插件来添加百度地图的脚本，但未找到相关的自定义插件文件。
2. 缺少百度地图的密钥，需要去百度地图开发者平台获取并替换到代码中。
3. 使用了未定义的BMapGL对象，可能是没有正确引入百度地图的脚本文件。
4. 可能还存在其他的问题导致页面显示为空白并报错。

解决方案

根据问题分析，我们可以根据以下步骤来解决问题：

1. 创建自定义插件文件 customPlugin.js，并将百度地图脚本的代码放入其中。确保自定义插件的文件路径和命名与代码配置中一致。

// 在src目录下的plugins文件夹中新建customPlugin.js文件写入以下代码

export default (api, opts) => {
  // 在HTML尾部添加脚本
  api.headScripts(() => {
    return [
      {
        // 百度地图
        type: 'text/javascript',
        src: '//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥',
      },
    ];
  });
};

1. 前往百度地图开发者平台获取密钥，并将密钥替换到自定义插件文件中的代码的ak参数处。

2. 在项目的.umirc.ts文件中，将自定义插件文件的路径正确配置到plugins选项中。

import { defineConfig } from 'umi';

export default defineConfig({
  plugins: ['./plugins/customPlugin.js'],
});

1. 在页面中正确引入百度地图的脚本文件，并确保可以正确使用BMapGL对象。可以试着使用console.log(window.BMapGL)来检查是否可以获取到BMapGL对象。

import React, { useEffect } from 'react';

const MapDemo = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = '//api.map.baidu.com/getscript?v=3.0&ak=密钥';
    script.onload = () => {
      console.log(window.BMapGL); // 检查是否可以获取到BMapGL对象
      var map = new window.BMapGL.Map("container");
      map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11);

      var p1 = new window.BMapGL.Point(116.301934, 39.977552);
      var p2 = new window.BMapGL.Point(116.508328, 39.919141);

      var driving = new window.BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
      driving.search(p1, p2);
    };
    document.head.appendChild(script);
  }, []);

  return <div id="container" style={{ width: '100%', height: '500px' }}></div>;
};

export default MapDemo;

1. 确保项目依赖中已经正确安装了 react-bmapgl 库，并在页面中正确使用 Map 组件。

import React from 'react';
import { Map } from 'react-bmapgl';

const MapDemo = () => {
  const center = { lng: 116.404, lat: 39.915 };
  const point1 = { lng: 116.301934, lat: 39.977552 };
  const point2 = { lng: 116.508328, lat: 39.919141 };

  const options = {
    renderOptions: { map: 'map', autoViewport: true },
  };

  const handleLoad = () => {
    const map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(center.lng, center.lat), 11);

    const driving = new BMapGL.DrivingRoute(map, options);
    driving.search(new BMapGL.Point(point1.lng, point1.lat), new BMapGL.Point(point2.lng, point2.lat));
  };

  return (
    <Map
      id="container"
      style={{ width: '100%', height: '500px' }}
      enableScrollWheelZoom
      enableDoubleClickZoom
      enableDragging
      enableKeyboard
      onLoad={handleLoad}
    />
  );
};

export default MapDemo;

1. 如果问题还没有解决，可能存在其他的问题，这时候就需要更多的调试和排查。可以在浏览器的开发者工具中查看控制台输出和网络请求，以便找到具体的错误和问题所在。

结论

根据提供的信息和解决方案，我们可以解决配置问题和使用百度地图API进行线路规划的问题。需要根据具体的运行环境和代码情况，结合以上解决方案进行调试和排查。如果问题仍然存在，可能涉及到其他因素，需要进一步排查和调试。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^