react-bmap 安装于使用

react-bmap安装与使用

一、安装
1、

npm i react-bmapgl -S

2、引入js（public index.html）

<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥">
</script>

3、引入组件

import { Map, Marker, NavigationControl, InfoWindow, Polyline, Polygon, ZoomControl } from 'react-bmapgl';

二、Map
1、引入获取

ref={ref => { this.map = ref.map }}

2、地图中心

center={{ lng: center.lon, lat: center.lat }}

3、缩放层级

zoom="13"

4、鼠标滚动缩放

 enableScrollWheelZoom={true}

5、样式

style={{ height: 600 }}

三、Marker

position={{lng，lat}}
icon=“start”
onClick={this.showInfo}

四、绘线（Polyline）

  path={position_list.map(item => new window.BMapGL.Point(item.lon, item.lat))}strokeColor="#f00"strokeWeight={6}

五、多边形（Polygon）

 path={details.area.map(item => new window.BMapGL.Point(item.lon, item.lat))}strokeColor="#f00"strokeWeight={1}fillColor="#ff0"fillOpacity={0.1}onMouseover={e => { console.log(e) }}//路径：线条颜色，线条粗细，填充颜色，填充透明度

六、缩放组件

<ZoomControl />

七、导航组件

<NavigationControl />

八、信息窗口（InfoWindow）
1、ref={ref => { this.infoWindow = ref.infoWindow }}
2、位置position={new window.BMapGL.Point(center.lon, center.lat)}
3、标题title="订单信息"
4、文本内容text={text}
5、打开信息窗口

this.map.openInfoWindow(this.infoWindow, this.map.getCenter());

react-bmap 安装于使用相关推荐

Vue及React脚手架安装
React npm i -g create-react-app create-react-app project React路由安装 yarn add react-router-dom Vue cnp ...
解决react在安装antd之后出现Module not found: Can't resolve './locale' in。。。的问题
React在安装antd之后出现Can't resolve './locale'in...问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在momen ...
react的安装使用
react的重要思想是通过组件来开发应用,而组件就是能够完成某个特定功能而独立.可复用的代码. react是可以像JQuery那样直接下载引入使用,也可以直接引用官网提供的CDN的地址: <sc ...
react入门--------安装react
创建一个单页面应用 Create React App是开始构建新的React单页应用程序的最佳方式. 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的 ...
React：安装配置使用scss
目录前言: 1.暴露隐藏的webpack配置: 2.安装sass的相关包: 3.项目中新建一些scss文件: 4.在config文件夹中找到webpack.config.js文件,进行配置: 5.测 ...
react slick安装后引入css样式报错
使用react-slick是为了在使用react hook的同时更加方便的实现轮播图. 因为看到antd组件库的走马灯太简单,不好复制,所以自以为找到了cv的好途径. 但,我不知道的是react-sl ...
【React脚手架安装】用yarn命令：yarn create react-app myapp 显示错误：error Command failed.
目录问题解决办法问题安装React脚手架时使用yarn create react-app my app命令显示如下错误. engguilideMacBook-Pro:textApp zengg ...
react native 安装watchman flow
安装watchman-自动监听文件内容变化,刷新数据 brew install watchman 1 如果提示没有安装brew /usr/bin/ruby -e "$(curl -fsSL ...
react手脚架安装
第一步环境有 nodejs npm 全局安装环境变量 npm 修改全局安装路径查看当前环境npm config ls修改全局安装路径npm config set prefix "D:\P ...
React 脚手架安装
我是表哥Harker,表妹我来咯~ 历经千辛万苦来到了web开发阶段的最后一个部分,React脚手架的使用,时代在进步,现在的web开发不是以前那种用html+css写一个网页就行了,现在是高端型,写 ...

react-bmap 安装于使用

react-bmap安装与使用

react-bmap 安装于使用相关推荐

最新文章

热门文章