React中使用百度地图
1,找到百度地图首页
进入百度地图开放平台 ,地址如下
百度地图开放平台 | 百度地图API SDK | 地图开发
2.找到开发文档中react-BMapGL
如上图所示,我们进入React-BMapGL(JSAPI)
地址如下:React-BMapGL文档
3.安装使用
第一次使用百度地图,在使用地图之前,我们可以先了解一下百度地图的一些Api,了解一些地图的基本概念,并申请成为开发者
百度地图api:jspopularGL | 百度地图API SDK
引入脚本
需要在你的public/index.html模板页面头部加载百度地图JavaScript API代码,密钥可去百度地图开放平台官网申请
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
使用npm方式安装react组件库,然后通过es模块加载
npm install react-bmapgl --save
等待安装完成之后,重新启动项目
4.在react中写入地球
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';class App extends React.Component {render() {return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11"><Marker position={{lng: 116.402544, lat: 39.928216}} /><NavigationControl /> <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/></Map>}
}
ReactDOM.render(<App />, document.getElementById('container'));
5.异步加载与按需导入
通常,如果您的业务场景总需要使用到地图,或者需要创建多个地图实例,我们会建议您在index.html
模板中加入JSAPI的scirpt标签,因为这种方式对后续开发没有任何限制。
但是在某些业务场景下,可能并不一定会使用到地图,且用到的地图功能、组件也相对简单,我们也提供了MapApiLoaderHOC
高阶组件,实现异步加载的方式
异步加载
class App extends React.Component {render() {return (<Mapstyle={{ height: 450 }}center={new BMapGL.Point(116.404449, 39.914889)}zoom={12}/>)}
}export default MapApiLoaderHOC({ak: '您的密钥'})(App)
按需导入
常用的导入方法会直接把整个包导入进来
import { Map, Marker, MapvglView, MapvglLayer } from 'react-bmapgl'
如果希望引入的包体积小一点,所有组件都支持lodash
风格进行按需导入
import Map from 'react-bmapgl/dist/Map'
import Marker from 'react-bmapgl/dist/Overlay/Marker'
6.Typescript支持
本项目开发使用Typescript
编写,声明文件为@types/bmapgl
,如果需要修改,需要给DefinitelyTyped提PR。如果需要安装声明文件依赖,执行安装命令
npm install @types/bmapgl -D
常见命令
npm install # 安装依赖npm start # 开始运行文档网站
npm run build:doc # 文档网站构建编译npm run build # 组件库编译,输出 js 和 .d.ts 文件npm publish # 发布新npm包
React中使用百度地图相关推荐
- 在react中使用百度地图
在react中使用百度地图 在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 在创建好的react项目中的public目录下的index.html中引入<scr ...
- react 中使用百度地图
安装 安装 在项目文件中打开cmd窗口,然后,使用npm方式安装react组件库. npm install react-bmapgl --save 在你的index.html模板页面头部加载百度地图J ...
- react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
- React native导入百度地图
开源地址:https://github.com/lovebing/react-native-baidu-map 今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑 ...
- react项目使用百度地图API
文章目录 前言 一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图 三.效果展示 总结 前言 最近在开发一款react ...
- react+typescript接入百度地图
前言 本章我们将通过react+typescript的方式给项目接入百度地图 步骤一:注册百度开发者,获取密匙 百度地图开放平台注册成为开发者,进入控制台,创建应用获取AK密钥 步骤二:修改项目的in ...
- Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图
2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...
- 在网页中插入百度地图
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...
- 在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...
最新文章
- 【Qt】QTest:编译Qt单元测试程序
- python——元素列表基础
- 记前端项目首屏加载优化(网络篇)
- Bootstrap4+MySQL前后端综合实训-Day06-PM【MD5加码-生成32位md5码、ResultData.java、分页查询用户数据、添加用户按钮的实现】
- JavaScript或jQuery中使用键盘控制对象运动
- linux实验总结及心得_安全实验室 | 内网渗透—Linux权限维持技巧总结
- 解决EF使用context.Database.SqlQuery时NotMapped属性列为空null的问题(转载)
- Cannot resolve table 't_daily'
- 偏最小二乘法(SIMPLS---未简化)
- 图像相似度的评价指标 : FID(Fréchet Inception Distance)
- 什么是网站跳出率?一招教你如何处理高跳出率?
- 誉天双11直播盛典,爆款课程打骨折!
- python 简单方式红绿灯状态识别
- GPU运算能力对比(详细)
- 解决Edge默认打开PDF内存不足
- html在线表单生成,一种基于html5的在线表单设计系统的制作方法
- Mine Goose Duck 0.4版本发布
- 我也不知道怎么回事_刚上场说做php的_女嘉宾把灯全灭了,这位程序员哥哥 其实我觊觎你很久了...
- 51job简历导出php,PHPWord 导出简历经验小结
- 一位平安集团16年老员工:怕你胸有鸿鹄之志,手无缚鸡之力
热门文章
- 怎么把word文档的docx后缀去掉
- HBase Shell实例
- 任达华主演的《重回地球》宣布正式杀青
- 服务器ftp文件夹权限设置密码,ftp 打开服务器文件夹权限设置
- Type-c雷电4口HUB扩展方案
- python 定义函数参数的类型_1作为函数声明中的参数类型 - python
- matlab 同花顺接口,数据不够?研究不透?iFinD免费版数据接口来“宠”你
- 当Python被用到社会学 | 词嵌入可测量不同群体对某概念的态度(偏见)
- android WiFi扫描并连接
- 面向对象程序设计——银行ATM机系统