react使用百度地图

最新推荐文章于 2024-06-27 21:30:42 发布

waillyer

最新推荐文章于 2024-06-27 21:30:42 发布

阅读量959

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/waillyer/article/details/117607027

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中集成百度地图API，包括申请AK，引入地图SDK，创建地图实例，设置自定义点位，以及添加信息窗口等功能。详细步骤和代码示例展示了从基础地图展示到交互式点位操作的完整过程。

摘要由CSDN通过智能技术生成

第一步、申请ak

具体请看官网
https://lbsyun.baidu.com/

第二步、引入

public\index.html

  <script
            type="text/javascript"
            src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=‘’C"
        ></script>

第三步、组件内使用

import React, { useEffect, useState } from 'react'
import './index.css'

const BMapGL = window.BMapGL
console.log(BMapGL)
export default () => {
    const [mapC, setMapC] = useState(null)
    useEffect(() => {
        var map = new BMapGL.Map("container");
        setMapC(map)
        console.log("mapC", mapC, map)
        init(map)
    }, [])
    const init = (map) => {
        // 创建地图实例 
        var point = new BMapGL.Point(116.404, 39.915);
        // // 创建点坐标 
        map.centerAndZoom(point, 15);
        drawPoint(map)
    }
    //自定义点位
    const drawPoint = (m) => {
        const opt = {
            position: new BMapGL.Point(116.404, 39.915),
            offet: new BMapGL.Size(30, -30)
        }
        let labal = new BMapGL.Label(`<div class="cacle">自定义</div>`, opt)
        labal.setStyle(
            {
                background: 'none',
                border: 'none'
            }
        )
        m.addOverlay(labal)
        m.addEventListener('click', e => {
            console.log(e)

        })
    }
    return <div>地图
        <div id="container" style={{ height: '100vh' }}></div>
    </div>
}

效果

在这里插入图片描述

antd-pro 使用百度地图
在这里插入图片描述

第一步
src/pages/document.ejs
中引入

<script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak="
    >

组件中使用

import React, { useEffect, useState } from 'react';
import styles from './index.less';

const { BMap } = window;
export default () => {
  // 自定义点位
  const drawPoint = (m) => {
    const opt = {
      position: new BMap.Point(116.404, 39.915),
      offet: new BMap.Size(30, -30),
    };
    const labal = new BMap.Label(`<div class=${styles.round_shape}>自定义</div>`, opt);
    labal.setStyle({
      background: 'none',
      border: 'none',
    });
    m.addOverlay(labal);
    m.addEventListener('click', (e) => {
      console.log(e);
    });
  };

  const init = (map) => {
    // 创建地图实例
    const point = new BMap.Point(116.404, 39.915);
    // // 创建点坐标
    map.centerAndZoom(point, 15);
    drawPoint(map);
  };
  useEffect(() => {
    const map = new BMap.Map('container');
    init(map);
  }, []);

  return (
    <div>
      地图01
      <div id="container" style={{ height: '100vh' }}></div>
    </div>
  );
};

信息窗体

在这里插入图片描述

import React, { useEffect, useState } from 'react';
import styles from './index.less';
import jingdong from '../../assets/jingdong.png';

const { BMap } = window;
// 信息窗口
const getInfoWindow = (map, item) => {
  const opts = {
    width: 250, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title: item.name, // 信息窗口标题
    message: item.message,
  };
  const detailData = `<div>${item.message}
  <img style='width:100px;' src=${jingdong} alt=""/>
  </div>`;
  const infoWindow = new BMap.InfoWindow(detailData, opts); // 创建信息窗口对象
  map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
};
export default () => {
  // 自定义点位
  const drawPoint = (map, item) => {
    const opt = {
      position: new BMap.Point(item?.data_real_time.baidu_lat, item?.data_real_time.baidu_lng),
      offet: new BMap.Size(30, -30),
    };
    const labal = new BMap.Label(`<div class=${styles.round_shape}>${item.name}</div>`, opt);
    labal.setStyle({
      background: 'none',
      border: 'none',
    });
    labal.addEventListener('click', (e) => {
      console.log(e);
      getInfoWindow(map, item);
    });
    map.addOverlay(labal);
  };

  const init = (map) => {
    const dataList = [
      {
        id: 1001,
        name: '用户01',
        message: '用户01信息',
        data_real_time: {
          baidu_lat: 116.404,
          baidu_lng: 39.925,
        },
      },
      {
        id: 1002,
        name: '用户02',
        message: '用户02信息',
        data_real_time: {
          baidu_lat: 116.404,
          baidu_lng: 39.915,
        },
      },
    ];
    dataList.forEach((item) => {
      // 创建地图实例
      const point = new BMap.Point(116.404, 39.928);
      // // 创建点坐标
      map.centerAndZoom(point, 15);
      const markerOpt = {
        title: '标题',
      };
      map.enableScrollWheelZoom(true);
      const marker = new BMap.Marker(
        new BMap.Point(item?.data_real_time.baidu_lat, item?.data_real_time.baidu_lng),
        markerOpt,
      );
      marker.addEventListener('click', (e) => {
        console.log(e);
        console.log('item.id', item.id);
      });
      map.addOverlay(marker);
      drawPoint(map, item);
    });
  };
  useEffect(() => {
    const map = new BMap.Map('container');
    init(map);
  }, []);

  return (
    <div>
      地图01
      <div id="container" style={{ height: '100vh' }}></div>
    </div>
  );
};