在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中加入你需要的百度地图democomponentDidMount () {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><divid='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中还是没有，所以第二种方法我自己测试失败，有好的解决方案，可以评论，看见回复

在react中使用百度地图相关推荐

react 中使用百度地图
安装安装在项目文件中打开cmd窗口,然后,使用npm方式安装react组件库. npm install react-bmapgl --save 在你的index.html模板页面头部加载百度地图J ...
React中使用百度地图
1,找到百度地图首页进入百度地图开放平台 ,地址如下百度地图开放平台 | 百度地图API SDK | 地图开发 2.找到开发文档中react-BMapGL 如上图所示,我们进入React-BMap ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
React native导入百度地图
开源地址:https://github.com/lovebing/react-native-baidu-map 今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑 ...
react项目使用百度地图API
文章目录前言一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图三.效果展示总结前言最近在开发一款react ...
react+typescript接入百度地图
前言本章我们将通过react+typescript的方式给项目接入百度地图步骤一:注册百度开发者,获取密匙百度地图开放平台注册成为开发者,进入控制台,创建应用获取AK密钥步骤二:修改项目的in ...
Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图
2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...
在网页中插入百度地图
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...
在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...

在react中使用百度地图

在react中使用百度地图

在react中使用百度地图相关推荐

最新文章

热门文章