码迷,mamicode.com
首页 > Windows程序 > 详细

React中使用百度地图API

时间:2018-11-24 11:32:19      阅读:1028      评论:0      收藏:0      [点我收藏+]

标签:png   color   ack   基础上   设置   控制   span   new   exp   

今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧

话不多说,我们直接开始好吧

特别注意:该React项目是用create react app 创建的(以下所有操作都在该基础上进行)

1.去百度地图登录

http://lbsyun.baidu.com/

2.获取密钥

  登录后在右上角的控制台里面申请(由于这个我早已申请过了,就不给大家演示了,大家照着它的提示走就可以了)

3.拿到密钥后,将百度API的script引入到public下的index.html文件

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

4.去node_modules文件夹下找react-script>config>webpack.config.dev.js

技术分享图片

然后我们打开该文件添加一句话

  externals:{
    ‘BMap‘:‘BMap‘,
  }

技术分享图片

5.到此我们已经可以在组件中愉快的使用百度地图API了,下面给个组件使用的实例

  

import  React,{Component} from ‘react‘;
import BMap  from ‘BMap‘;

 class AddressUi extends Component{ 
    render() {
        return(
                <div className="address" id="address">
                </div>
        )
    }
    componentDidMount(){
        var map = new BMap.Map("address"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom();
}
}
export default AddressUi

对百度地图API的具体操作可参照官网

http://lbsyun.baidu.com/jsdemo.htm#i8_1

 

特别注意:注意在react中使用百度地图的API时会传入大写的变量名,这时要使用window.变量名,来表明它是全局变量,不然会报错

  

React中使用百度地图API

标签:png   color   ack   基础上   设置   控制   span   new   exp   

原文地址:https://www.cnblogs.com/suihang/p/10010684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!