使用react开发，Uncaught Error: BMap api is not loaded

[lgyytm]

One-line summary [问题简述]

引入 const reactMixin = require('react-mixin'); const Actions = require('./actions'); const Store = require('./store'); const echarts = require('echarts'); require('echarts/extension/bmap/bmap'); require('echarts/lib/chart/heatmap'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title');

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:最新版
• Browser version [浏览器类型和版本]:chrome58.0.3+
• OS Version [操作系统类型和版本]:win10

Expected behaviour [期望结果]

引入是否出错，

ECharts option [ECharts配置项]

        let t = this;
        myChart = echarts.init(t.refs.map);
        let points = [].concat.apply([], $points.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([1]);
            });
        }));

option = {
animation: false,
            bmap: {
                center: [120.13066322374, 30.240018034923],
                zoom: 14,
                roam: true
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: $points,
                pointSize: 5,
                blurSize: 6
            }]
}
        myChart.setOption(option);

Other comments [其他信息]

[pissang]

关于百度地图扩展的使用 https://github.com/ecomfe/echarts/tree/master/extension/bmap

[lgyytm]

我就是参照这里的，然后报的就是这个错

[pissang]

引入 http://api.map.baidu.com/api 了没？

[lgyytm]

这个需要在申请ak是吧？

[pissang]

嗯

[lgyytm]

谢谢

[fufjvnvnf]

请问如何引入api key？是什么格式的语句？

[lgyytm]

<script src="http://api.map.baidu.com/api?v=2.0&ak=你申请到的"></script>

[fufjvnvnf]

请问你是在react.component的render方法内加入这一句，还是在最后reactDOM.render的时候加入的？谢谢

[evgeny-s]

Hello, where can I take API key. I'm from Belarus, and can't registered here: https://passport.baidu.com/v2/?reg&tt=1503147508627&gid=A92280A-C194-4353-B8B6-28481BD1871E&tpl=pp&u=http%3A%2F%2Flbsyun.baidu.com%2Fapiconsole%2Fkey to take the key :(

[pissang]

Hi @evgeny-s . It is not suggested using BMap extension outside of China. Instead you can use mapbox integration in https://github.com/ecomfe/echarts-gl

[evgeny-s]

Thank you @pissang.

[hafrans]

README中写的关于引用一节提到：

引入

可以直接引入打包好的扩展文件和百度地图的 jssdk

<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<!-- 引入 ECharts -->
<script src="dist/echarts.min.js"></script>
<!-- 引入百度地图扩展 -->
<script src="dist/extension/bmap.min.js"></script>

如果是 webpack 打包，也可以 require 引入

require('echarts');
require('echarts/extension/bmap/bmap');

如果对模块本身不太熟悉的话，如果使用webpack打包，在看README时候会很容易忽略对api的引入,即<script src="http://api.map.baidu.com/api?v=2.0&ak="></script>，从而造成 BMap api is not loaded .