在react中使用百度地图

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

原创最新推荐文章于 2024-06-27 21:30:42 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#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中还是没有，所以第二种方法我自己测试失败，有好的解决方案，可以评论，看见回复