在react中使用百度地图

本文介绍了在React项目中如何集成百度地图的三种方法:利用window对象保存BMap、通过webpack externals配置以及使用react-bmap库。第一种和第三种方法已验证可行,但第二种方法因找不到webpack.config.dev.js文件而未成功。作者提示,若对此有解决方案,欢迎评论交流。

在react中使用百度地图

在react中使用百度地图有三种方式

1:首先使用window保存BMap

 	1): 在创建好的react项目中的public目录下的index.html中引入
 	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
    <script>
      window.BMap = BMap
    </script>
    2):然后在src中新建BaiduMap中加入你需要的百度地图demo
    	    componentDidMount () {
		       const {BMap,BMAP_STATUS_SUCCESS,BMAP_ANCHOR_TOP_LEFT}=window;
		        var map = new BMap.Map("allmap");
		        var point = new BMap.Point(116.404, 39.915);
		        map.centerAndZoom(point, 14);
		        map.enableScrollWheelZoom();
		        map.enableInertialDragging();
		        map.enableContinuousZoom();
		        var size = new BMap.Size(10, 20);
		        map.addControl(new BMap.CityListControl({
		            anchor: BMAP_ANCHOR_TOP_LEFT,
		            offset: size,
		        }));
		        var geolocation = new BMap.Geolocation();
		        geolocation.getCurrentPosition(function(r){
		            if(this.getStatus() == BMAP_STATUS_SUCCESS){
		                var mk = new BMap.Marker(r.point);
		                map.addOverlay(mk);
		                map.panTo(r.point);
		                alert('您的位置:'+r.point.lng+','+r.point.lat);
		            }
		            else {
		                alert('failed'+this.getStatus());
		            }        
		        },{enableHighAccuracy: true})
		    }
		    render(){
		        return (
		            <div>
		            <div  id='allmap' style={{
		                width:'100vw',
		                height:'100vh'
		              }}></div></div>
		        )
		    }
	3):在你的入口文件index.js中使用
		ReactDOM.render(<BaiduMap />, document.getElementById('root'));

2:通过webpack的externals加载BMap使它可以通过require或import引入,在node_modules中react-scripts的webpack.config.dev.js中添加

		module.exports = {
			/*此处省略了entry,output,modules等配置*/
			  externals:{
			    'BMap':'BMap'
			  },
		}
	例子:
		import React from 'react'
		import ReactDOM from 'react-dom'
		import BMap from 'BMap'
		class BaiduMap extends React.Component {
		componentDidMount () {
		  var map = new BMap.Map("allmap"); // 创建Map实例
		  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
		  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
		  map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
		  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		}
		 
		render () {
		  return (
		    <div>
		      <div
		        id='allmap'
		        style={{
		          width:'100vw',
		          height:'100vh'
		         }} />
		    </div>
		       )
		       }
		}
		ReactDOM.render(
		  <BaiduMap />,
		  document.getElementById('root')
		)

3:使用react-bmap

 - 1:首先在react项目中,npm install react-bmap --save
 - 2:在react的项目的public目录中index.html中加入
 	 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
 - 3:例子
 	 import React from 'react'
   import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'
   class BaiduMap extends React.Component{
   
	    render(){
	        return (
	            <div>
	            <div  id='allmap' style={{
	                width:'100vw',
	                height:'100vh'
	              }}>
	                  <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
	                        <Marker position={{lng: 116.402544, lat: 39.928216}} />
	                        <NavigationControl /> 
	                        <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
	                    </Map>
	
	                  </div></div>
	        )
	    }
	}

第一种方式和第三种方式亲测有效,但是第二种在react项目中找不到webpack.config.dev.js,然后去网上找方法的时候,使用npm run eject之后,在config中还是没有,所以第二种方法我自己测试失败,有好的解决方案,可以评论,看见回复

使用百度地图中的MapVGL可以实现高性能的地图可视化。下面是一个简单的使用MapVGL的React组件示例: ```javascript import React, { Component } from 'react'; import BMapGL from 'BMapGL'; import { MapvglView } from '@mapvgl/mapvgl'; class MapvglDemo extends Component { componentDidMount() { const { center, zoom } = this.props; const map = new BMapGL.Map('map', { enableMapClick: false }); map.centerAndZoom(new BMapGL.Point(center[0], center[1]), zoom); const mapvglView = new MapvglView({ map }); const data = [ { geometry: { type: 'Point', coordinates: [116.3956, 39.9299] } }, { geometry: { type: 'Point', coordinates: [117.210813, 39.14393] } }, { geometry: { type: 'Point', coordinates: [121.526176, 31.216496] } }, ]; const layer = new mapvglView.Layer({ zIndex: 1, data: data, type: 'point', shape: 'circle', size: 10, color: 'rgba(255, 0, 0, 0.8)', strokeColor: 'rgba(255, 255, 255, 1)', strokeWidth: 2, isHotspot: true, isInteractive: true, }); mapvglView.addLayer(layer); } render() { return <div id="map" style={{ height: '400px' }} />; } } export default MapvglDemo; ``` 在上面的代码中,我们首先引入了百度地图的BMapGL库和MapVGL的React组件MapvglView。在组件的`componentDidMount`生命周期函数中,我们创建了一个百度地图实例,并将其传递给MapvglView的构造函数中,然后创建了一个点图层,并将其添加到MapvglView中。最后,我们在render函数中返回了一个div元素作为地图容器。 需要注意的是,为了让MapVGL正常工作,你需要在HTML文件中引入MapVGL的JavaScript文件和CSS文件。具体可以参考MapVGL的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值