React中使用百度地图API

2021-06-29 16:07

阅读：574

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

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

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

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

1.去百度地图登录

http://lbsyun.baidu.com/

2.获取密钥

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

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

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(
                
                
        )
    }
    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

上一篇：安装程序无法创建新的系统分区，也无法定位现有系统分区_安装win7在固态硬盘解决

下一篇：win10装jdk

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：React中使用百度地图API
文章链接：http://soscw.com/essay/99442.html

亲，登录后才可以留言！

React中使用百度地图API

评论

热门文章

推荐文章

最新文章

置顶文章