• React中使用百度地图API 2019-07-15 14:45:44
    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用create react ...

    今天我们来搞一搞如何在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.变量名,来表明它是全局变量,不然会报错

      

    转载于:https://www.cnblogs.com/suihang/p/10010684.html

    展开全文
  • 在React中使用百度地图 2018-05-26 22:10:21
    index.html添加百度地图的调用接口 由于react工程是由脚手架创建的即create-react-app创建的。 因此只需要修改node_modules文件下面的webpack.config.dev.js文件即可 下面就可以使用了: 使用demo: ...
  • 在react中使用百度地图 2019-06-11 19:30:09
    在react中使用百度地图 在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 创建好的react项目中的public目录下的index.html中引入 <script type="text/javascript" src=...
  • 2.直接你的React的构造方法(ES6)中或者你其他相应的方法中使用百度地图的js方法: 3.千万别纠结组件里怎么引用百度的API,怎么动态的标签里加载百度API,我只能告诉你,不是简简单单的就能实现,因为...
  • 最近项目开发的过程,遇到了要获取经纬度的问题,由于本人菜的一批,多方询问的情况下,得到了思否大佬@asseek的解答,找到了百度地图的相关API,写个博客记录一下用法备忘。 原问题链接:...
  • 在React 中使用百度地图,高德地图出现'AMap' is not defined 'BMap' is not defined index.html &lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=...
  • 所以想整理一下,写一个在react中根据不同的需求使用地图api的各种demo集合,所以先以百度地图为例。 本文将根据官网显示的demo列表,一个一个实现在react中使用方法。文章内容较长,将会持续更新,同时也会...
  • react 使用百度地图 2020-01-10 14:31:48
    #在react中使用百度地图分以下几步: ##一、登录百度http://lbsyun.baidu.com/,拿到ak值(如果没有的话,就进入这个网址按步骤进行获取:http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey) ##...
  • 最近react做一个项目,需要使用到地图展示地址,由于之前就有用过百度地图,申请过ak,所以这次就直接用百度地图了。但是之前是使用vue,react怎么使用百度地图还是第一次,特此记录,以备有需要的人。 本文...
  • 首先进入百度地图官网: 进入web开发的javaScript API:: 进图开发指南的Hello World示例: 然后就能看到API的简单使用使用步骤: 首先要有百度账号申请ak,点我申请就可以了 走2、 3、4步 第5步:引用百度...
  • 这是一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目,Gitee 镜像仓库。 文档实例预览: Github | Gitee 特性 ♻️ 自动加载百度地图 SDK(通过创建 Script 标签的形式加载),包括第三方...
  • React native导入百度地图 2018-07-16 19:54:51
    今天在React native导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑... 1、Install 安装   npm install react-native-baidu-map --save   2、settings.gradle添加以下内容 ...
1 2 3 4 5 ... 20
收藏数 2,470
精华内容 988