react-baidu-map 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
react-baidu-map 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
react-baidu-map 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
react-baidu-map 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
react-baidu-map 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

react-baidu-map 是一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中。

文档预览: Github | Gitee

安装

不依赖 uiw 组件库

npm install @uiw/react-baidu-map --save

使用

import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/05/06 10:55

react-native-baidu-map使用及注意问题

使用组件: # **[react-native-baidu-map](https://github.com/lovebing/react-native-baidu-map)** ## 获取百度地图API_KEY 地址:http://lbsyun.baidu.com,在控制台成功创建应用后,就可以看到应用的api key了 ![image.png](https://upload-images.jianshu.io/upload_images/3112038-cce25b2b61722b9d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 安装 ``` yarn add react-native-baidu-map ``` ## 原生部分...

0
0
发表了博客
2018/03/13 11:38

react-native android 集成 react-native-baidu-map

记录下 遇到的问题,方便以后查看,参考 文章 https://www.jianshu.com/p/7ca4d7acb6d2 1. npm install react-native-baidu-map --save //安装 react-native link react-native-baidu-map //连接 2.配置 --- 自动链接 有些地方能链接上,有的地方链接不上则需要手动加上 参考下面配置,如果有了就不用修改,如果不同则需要修改 (1). android/setting.gradle    include ':react-native-baidu-map' project(':react-n...

0
0
发表了博客
2018/08/01 14:57

react-native-baidu-map android 配置

最近折腾react-native,集成百度地图遇到了坑,且持续的时间比较长,折腾了好几天才彻底折腾好,现在把折腾经验罗列一二,免得有同胞跟我一样持续折腾 1、初始化react-native 项目,并且下载react-native-baidu-map包 2、目前版本在按正常引入后有报@Override方法不会覆盖或实现超类型的方法,在react-native-baidu-map里边找到android src main Java BaiduMapPackage 删除最后一个creatJsModule 3、最关键的一个,加权限:在And...

0
0
发表了博客
2018/03/12 17:01

react-native ios 集成 react-native-baidu-map

自己测试了下,https://www.jianshu.com/p/eceb7e66fa5e?appinstall=0 记录下自己遇到的问题,以及解决方法, 首先新建一个react native项目,然后 安装 react-native-baidu-map 模块, 安装   npm install react-native-baidu-map --save   或者   yarn add react-native-baidu-map 使用上面2个都是可以的 项目以及 地图组建安装好了,接下来就是配置了: 先打开.xcodeproj 文件进入xcode 配置 xcode配置:   1. 添...

0
0
发表了博客
2019/03/19 09:50

vue-baidu-map 的简单使用

首先附上vue-baidu-map 文档地址: https://dafrok.github.io/vue-baidu-map/#/zh/index 1.安装,初步使用,文档说的都很明白,就不在过多重复,特别强调哦一下 @ready 方法必须配置一下 如下图: 2..使用控件,覆盖物之类的方法 html: <!-- 组件 --> <baidu-map class="Bmap" ak='你的秘钥' :center="center" :zoom="zoom" @ready="handler" :style='co...

0
0
发表了博客
2018/06/07 09:10

react map 遍历

1.map方法 注:map 返回的是一个新数组 class App extends Component { // constructor(props) { // super(props); // this.state = { // arr: ['aaa','bbb','ccc'] // }; // } state = { arr: ['aaa','bbb','ccc'] } render() { return ( <div> { this.state.arr.map(function(item,index) { // map 返回的是一个新数组 return ...

0
0
发表了博客
2018/03/01 16:54

vue baidu map之获取选中点的经纬度

需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认 关闭弹窗 得到经纬度 效果: vue baidu map api链接 : https://dafrok.github.io/vue-baidu-map/#/zh/index 使用之前需要先申请百度服务密钥 由于要多次用到地图选点,故封装成一个简单的组件,在需要的地方进行引入,弹窗用的是iview的modal,本例中用的是局部引入vue baidu map 在需要的地方引入组件 eg: <mapCompon...

0
0
发表了博客
2020/01/08 17:47

关于 Vue Baidu Map 自动定位

vue 中自动定位 <template> <baidu-map class="map" :zoom="zoom" :center="center" @ready="handler"> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ></bm-geolocation> </baidu-map> </template> //js代码//--------------------------------------// data() { return { c...

0
0
发表了博客
2018/04/04 15:40

vue2.0之Vue Baidu Map 局部注册使用

文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id="mapContent" class="bm-view" ak="YOUR_APP_KEY" :center="center" :zoom="zoom" @ready="handler"> <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true"> </bm-marker> </baidu-map> </template> <script> import BaiduMap from 'vue-baidu-map/components/Map/Map.vue' import BmMarker from 'v...

0
0
发表了博客
2019/07/05 20:51

vue中使用baidu-map获取当前坐标。

1.安装iview   $npm install iview --save   在main.js中引入      这样就算安装完成了! 2.安装baidu-map插件   $ npm install baudu-map --save   安装成功之后就可以再页面上显示了,我做的是效果是这样的,一边移动一边获取点的坐标,点击也可以,给大家看看效果图:       最后贴上代码,      <template>       <div>         <div class="baiduMap">           <i-form :...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
4 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部