react-百度地图

最新推荐文章于 2024-08-07 10:25:36 发布

小小白一位

最新推荐文章于 2024-08-07 10:25:36 发布

阅读量277

点赞数

文章标签： react.js 百度 javascript

本文链接：https://blog.csdn.net/Wldngcs/article/details/122461156

版权

安装

npm i reacat-bmapgl -S  //安装react组件库

引入js

public/index.html

<script src="https://api.map.baidu.com/apiv=1.0&&type=webgl&ak=你的ak"></script>

引入组件

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

Map

如果你在业务中需要操作map对象，需要BMapGL.Map实例的话，可以通过组件实例的map属性访问到它。

<Map
 ref={ref => {this.map = ref.map}}   //获取map实例
 center = {lng:center.lng,lat:center.lat}}    //地图中心
 zoom=“13”   //缩放层级
 enableScrollWheelZoom={true}    //鼠标滚动
 style={{height:600}}    //样式
 />

Marker点标注

<Marker
 position={{lng,lat}}    //标注点的坐标
 icon="start"    //图标
 onClick={this.showInfo}    //单机事件
>
 <ZoomControl />    //缩放控件
 <NavigationControl />    //3D控件
</Marker>

Polyline绘线

<Polyline
 path={new window.BMapGL.Point(lng, lat))}    //路径
 strokeColor="#f00"    //折线的颜色
 strokeWeight={6}      //折线的宽度
/>

polygon多边形

<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)}}    //鼠标指针移入覆盖物事件的回调函数
/>