百度地图api之室内地图----react

在react项目中使用

1.去百度地图登录

http://lbsyun.baidu.com/

2.获取密钥

登录后在右上角的控制台里面申请

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
//不要忘了这个，把地图挂到window下
<script>
		window.BMap = BMap
</script>

4.在react中使用----简单创建

import React, {
    Component } from 'react'
class MapDemo extends Component {
   
	constructor(props) {
   
		super(props);
		this.state = {
   };
}
getMap=()=>{
   
    let lng = 116.340739
	let lat = 40.03592
	// 创建Map实例,初始化地图， 设置中心点坐标和地图级别,19表示室内地图
	let BMap = window.BMap	
	let map = new BMap.Map("map")
	map.centerAndZoom(new BMap.Point(lng, lat), 19);
	//启用滚轮放大
    map.enableScrollWheelZoom(true)
   //禁止拖拽
   // map.disableDragging();
  //其他设置可看官网
  //http://lbsyun.baidu.com/jsdemo.htm#a3_3 
  //http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a0b0    
}
componentDidMount() {
   
		this.getMap()
}
render() {
   
	return (
	<div id="map"></div>	
)
}}
export default MapDemo;

5.在react中使用----图标与底图的隐藏与显示

只需要加入以下代码

//不要忘了在index.html文件中添加‘window.BMapLib = BMapLib‘
let BMapLib = window.BMapLib
var indoorManager = new BMapLib.IndoorManager(map)
// 隐藏图标文字
indoorManager.hideLabels();
// 显示图标文字
// indoorManager.showLabels();
// 隐藏室内图底图
indoorManager.hideBaseMap();
// 显示室内图底图
// indoorManager.showBaseMap();

完整代码

import React, {
    Component } from 'react'
class MapDemo extends Component {
   
	constructor(props) {
   <