关于在react中引用百度地图

最新推荐文章于 2022-01-12 21:34:50 发布

angan0295

最新推荐文章于 2022-01-12 21:34:50 发布

阅读量249

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LXY02/p/9339077.html

版权

按照以下三个步骤即可：

1、首先要去百度地图上申请密钥。

2、在react中引入百度地图相关script

例如是用create-react-app方式创建的项目，就在public/index.html的<head></head>中加入script
如下：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的密钥" ></script>

3、为了防止之后报错BMap is not defined，我这里采用的是引用echarts，在echarts里绘制百度地图的方法。

 我用的版本是：

   "echarts": "3.7.2"
   "echarts-for-react": "2.0.6"

 代码如下：

// 百度地图
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import 'echarts/dist/extension/bmap';

export default class BaiduMapUseEcharts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option: {
                tooltip: {
                    trigger: 'item'
                },
                bmap: {
                    center: [116.331398, 39.897445],
                    zoom: 10,
                    roam: true
                },
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: [
                            { value: [116.384722, 39.977552] }
                        ],
                        symbol: 'pin',
                        symbolSize: '16',
                        itemStyle: {
                            normal: {
                                color: '#FF4500'
                            },
                            emphasis: {
                                color: 'red'
                            }
                        }
                    }
                ]
            }
        };
    }
    render() {
        return (
            <div>
                <ReactEcharts
                    ref={(element) => { this.echartsReact = element; }}
                    style={{width: '100%', height: '366px'}}
                    option={this.state.option}
                    notMerge
                    lazyUpdate />
            </div>
        );
    }
}

转载于:https://www.cnblogs.com/LXY02/p/9339077.html

angan0295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于在react中引用百度地图

按照以下三个步骤即可：1、首先要去百度地图上申请密钥。2、在react中引入百度地图相关script例如是用create-react-app方式创建的项目，就在public/index.html的<head></head>中加入script如下：<script type="text/javascript" src="https:...
复制链接

扫一扫

关于在react中引用百度地图

“相关推荐”对你有帮助么？