特别注意：该React项目是用create react app 创建的（以下所有操作都在该基础上进行）

1.去百度地图注册登录

/

2.获取密钥

登录后在右上角的控制台里面申请（申请流程按提示走，要实名认证）；如图

3.引入脚本

拿到密钥后，将百度API的script引入到public下的index.html文件

<script type="text/javascript" src="http://api./api?v=2.0&ak=你的密钥"></script>

然后，使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --save

4.到此我们已经可以在组件中愉快的使用百度地图API了，下面给个组件使用的实例

import React,{Component} from 'react';//导入地图组件import {Map, Marker, NavigationControl} from 'react-bmapgl';class App extends Component{ render() {return(<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>)}componentDidMount(){var map = new BMap.Map("address"); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom();}}export default App

下面在说一说百度地图api在html网页中如何使用：

1.同理引入脚本，添加ak

2.写一个div存放地图（注意设置宽高）

3.实例化地图：

<script>// 创建一个地图实例var map = new BMapGL.Map("container");// 创建一个点var point = new BMapGL.Point(116.404, 39.915);// 设置缩放与中心点map.centerAndZoom(point, 15);</script>

4.添加控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式

5.地图事件

//给地图添加事件map.addEventListener('click', function(e) {alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);});//dblclick 双击

6.地图的绘制，点，线，面

// 绘制一个点var marker = new BMapGL.marker(point); //创建标注map.addOverlay(marker); // 将标注添加到地图中

//添加折线var polyline = new BMapGL.Polyline([new BMapGL.Point(116.399, 39.910),new BMapGL.Point(116.405, 39.920),new BMapGL.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});map.addOverlay(polyline);

//添加多边形var polygon = new BMapGL.Polygon([new BMapGL.Point(116.387112,39.920977),new BMapGL.Point(116.385243,39.913063),new BMapGL.Point(116.394226,39.917988),new BMapGL.Point(116.401772,39.921364),new BMapGL.Point(116.41248,39.927893)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});map.addOverlay(polygon);

//圆形var circle = new BMapGL.Polygon([-----------], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});map.addOverlay(circle);

7.文本标注

var point = new BMapGL.Point(116.404, 39.915);var content = 'label';var label = new BMapGL.Label(content, { // 创建文本标注position: point,// 设置标注的地理位置offset: new BMapGL.Size(10, 20) // 设置标注的偏移量}) map.addOverlay(label); // 将标注添加到地图中//修改文本标注样式 label.setStyle({// 设置label的样式color: '#000',fontSize: '30px',border: '2px solid #1E90FF'})

8.向地图中添加信息窗口

var opts = {width: 250,// 信息窗口宽度height: 100, // 信息窗口高度title: "Hello" // 信息窗口标题}var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

。。。。。