react-bmap 安装于使用

2022-01-12 19:32:30 阅读：223 来源： 互联网

标签：map center ref lon react item bmap lat 安装

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}
    onm ouseover={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());

标签：map,center,ref,lon,react,item,bmap,lat,安装
来源： https://blog.csdn.net/w20180341314/article/details/122460286

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-bmap 安装于使用

react-bmap安装与使用