react-百度地图

最新推荐文章于 2024-08-18 10:23:06 发布

蒂芬

最新推荐文章于 2024-08-18 10:23:06 发布

阅读量400

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/L58656231/article/details/122461633

版权

注册好百度地图开发平台
引入src添加 ak

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

在这里插入图片描述
使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --save

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

<Map ref={ref => {this.map = ref.map}} />

开发Map的子组件，想要在子组件中获得map对象，可以直接在包裹的子组件中调用this.props.map即可。

function App() {
    return <Map>
        <MapComponent />
    </Map>
}

function MapComponent(props) {
    console.log(props.map);
}

缩放控件

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <ZoomControl />
      </Map>
    )
  }
}

<Example />

比例尺控件

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <ScaleControl />
      </Map>
    )
  }
}

<Example />

圆形控件

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <Circle
          center={new BMapGL.Point(116.40, 39.91)}
          radius={5000}
          strokeColor="#f00"
          strokeWeight={2}
          fillColor="#ff0"
          fillOpacity={0.3}
        />
      </Map>
    )
  }
}

<Example />

信息化窗口

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <InfoWindow
          position={new BMapGL.Point(116.40, 39.91)}
          title="标题"
          text="快速文本信息窗口"
          onClickclose={e => {console.log(e)}}
        />
      </Map>
    )
  }
}

<Example />

点标志

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <Marker
          position={new BMapGL.Point(116.404449, 39.914889)}
          enableDragging
        />
      </Map>
    )
  }
}

<Example />

多边形

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <Polygon
          path={[
            new BMapGL.Point(116.35, 39.88),
            new BMapGL.Point(116.40, 39.92),
            new BMapGL.Point(116.33, 40.01),
          ]}
          strokeColor="#f00"
          strokeWeight={2}
          fillColor="#ff0"
          fillOpacity={0.3}
          onMouseover={e => {console.log(e)}}
        />
      </Map>
    )
  }
}

<Example />

折线

import Map from 'react-bmapgl/Map'

class Example extends React.Component {
  render() {
    return (
      <Map
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        tilt={40}
      >
        <Polyline
          path={[
            new BMapGL.Point(116.35, 39.88),
            new BMapGL.Point(116.40, 39.92),
            new BMapGL.Point(116.33, 40.01),
          ]}
          strokeColor="#f00"
          strokeWeight={10}
        />
      </Map>
    )
  }
}

<Example />