react使用百度地图

地图"/>

react使用百度地图

第一步、申请ak

具体请看官网
/

第二步、引入

public\index.html

  <scripttype="text/javascript"src="=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
中引入

<scripttype="text/javascript"src="=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>);
};