在react項(xiàng)目中使用

1.去百度地圖登錄

http://lbsyun.baidu.com/

2.獲取密鑰

登錄后在右上角的控制臺(tái)里面申請(qǐng)

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script> //不要忘了這個(gè)，把地圖掛到window下 <script>window.BMap = BMap </script>

4.在react中使用----簡單創(chuàng)建

import React, { Component } from 'react' class MapDemo extends Component {constructor(props) {super(props);this.state = {}; } getMap=()=>{let lng = 116.340739let lat = 40.03592// 創(chuàng)建Map實(shí)例,初始化地圖， 設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別,19表示室內(nèi)地圖let BMap = window.BMap let map = new BMap.Map("map")map.centerAndZoom(new BMap.Point(lng, lat), 19);//啟用滾輪放大map.enableScrollWheelZoom(true)//禁止拖拽// map.disableDragging();//其他設(shè)置可看官網(wǎng)//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中使用----圖標(biāo)與底圖的隱藏與顯示

只需要加入以下代碼

//不要忘了在index.html文件中添加‘window.BMapLib = BMapLib‘ let BMapLib = window.BMapLib var indoorManager = new BMapLib.IndoorManager(map) // 隱藏圖標(biāo)文字 indoorManager.hideLabels(); // 顯示圖標(biāo)文字 // indoorManager.showLabels(); // 隱藏室內(nèi)圖底圖 indoorManager.hideBaseMap(); // 顯示室內(nèi)圖底圖 // indoorManager.showBaseMap();

完整代碼

import React, { Component } from 'react' class MapDemo extends Component {constructor(props) {super(props);this.state = {}; } getMap=()=>{let lng = 116.340739let lat = 40.03592// 創(chuàng)建Map實(shí)例,初始化地圖， 設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別,19表示室內(nèi)地圖let BMap = window.BMaplet BMapLib = window.BMapLib let map = new BMap.Map("map")map.centerAndZoom(new BMap.Point(lng, lat), 19);//啟用滾輪放大map.enableScrollWheelZoom(true)//禁止拖拽// map.disableDragging();var indoorManager = new BMapLib.IndoorManager(map)// 隱藏圖標(biāo)文字indoorManager.hideLabels();// 顯示圖標(biāo)文字// indoorManager.showLabels();// 隱藏室內(nèi)圖底圖indoorManager.hideBaseMap();// 顯示室內(nèi)圖底圖// indoorManager.showBaseMap(); } componentDidMount() {this.getMap() } render() {return (<div id="map"></div> ) }} export default MapDemo;

5.在react中使用----創(chuàng)建復(fù)雜的覆蓋物

比如自定義標(biāo)簽，自定義的彈框，以點(diǎn)擊某個(gè)marker出現(xiàn)對(duì)應(yīng)彈框?yàn)槔?/h6>

加入以下代碼

創(chuàng)建marker

//不要忘了在index.html文件中添加‘window.BMapGL = BMapGL‘ let BMapGL = window.BMapGL let point = new BMapGL.Point(116.34061, 40.03592) //圖片地址及大小 let pointIcon = new BMapGL.Icon(‘圖片地址’, new BMapGL.Size(24, 21)) let marker = new BMapGL.Marker(point, { icon: pointIcon }) map.addOverlay(marker)

創(chuàng)建覆蓋物–彈框

// 自定義覆蓋物 function ComplexCustomOverlay(point, text, name) { this._point = point; this._text = text; this._name = name; } ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function (map1) {this._map = map1;//具體彈框樣式設(shè)置，省略var div = this._div1 = document.createElement("div")div.style.zIndex = 50div.style.background = 'url(' + fireImages.statusRectangle1 + ') no-repeat'div.style.height = '160px'div.style.width = '250px'div.style.position = 'absolute'map.getPanes().labelPane.appendChild(div);return div;} //彈框出現(xiàn)的位置 ComplexCustomOverlay.prototype.draw = function () {var map1 = this._map;var pixel = map1.pointToOverlayPixel(this._point);this._div1.style.left = pixel.x - 110 + "px";this._div1.style.top = pixel.y - 175 + "px";} //渲染覆蓋物 var myCompOverlay1 = new ComplexCustomOverlay(new BMap.Point(lng,lat), '', 'boxOverlay'); map.addOverlay(myCompOverlay1);

完整代碼

import React, { Component } from 'react' class MapDemo extends Component {constructor(props) {super(props);this.state = {}; } getMap=()=>{let lng = 116.340739let lat = 40.03592// 創(chuàng)建Map實(shí)例,初始化地圖， 設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別,19表示室內(nèi)地圖let BMap = window.BMaplet BMapLib = window.BMapLib let map = new BMap.Map("map")map.centerAndZoom(new BMap.Point(lng, lat), 19);//啟用滾輪放大map.enableScrollWheelZoom(true)//禁止拖拽// map.disableDragging();var indoorManager = new BMapLib.IndoorManager(map)// 隱藏圖標(biāo)文字indoorManager.hideLabels();// 顯示圖標(biāo)文字// indoorManager.showLabels();// 隱藏室內(nèi)圖底圖indoorManager.hideBaseMap();// 顯示室內(nèi)圖底圖// indoorManager.showBaseMap(); //-------------------------------------------------------------- //marker渲染 let BMapGL = window.BMapGL let point = new BMapGL.Point(116.34061, 40.03592) //圖片地址及大小 let pointIcon = new BMapGL.Icon(‘圖片地址’, new BMapGL.Size(24, 21)) let marker = new BMapGL.Marker(point, { icon: pointIcon }) map.addOverlay(marker) //彈框 // 自定義覆蓋物 function ComplexCustomOverlay(point, text, name) { this._point = point; this._text = text; this._name = name; } ComplexCustomOverlay.prototype = new BMap.Overlay(); function showInfo(e) {ComplexCustomOverlay.prototype.initialize = function (map1) {this._map = map1;var div = this._div1 = document.createElement("div")div.style.zIndex = 50div.style.background = 'url(' + fireImages.statusRectangle1 + ') no-repeat'div.style.height = '160px'div.style.width = '250px'div.style.position = 'absolute'//樣式省略map.getPanes().labelPane.appendChild(div);return div;}ComplexCustomOverlay.prototype.draw = function () {var map1 = this._map;var pixel = map1.pointToOverlayPixel(this._point);this._div1.style.left = pixel.x - 110 + "px";this._div1.style.top = pixel.y - 175 + "px";}//彈框覆蓋物的名字為boxOverlayvar myCompOverlay1 = new ComplexCustomOverlay(new BMap.Point(e.lng,e.lat), '', 'boxOverlay');map.addOverlay(myCompOverlay1);} //點(diǎn)擊marker，顯示與隱藏彈框 marker.addEventListener("click", (e) => { //獲取全部覆蓋物，如果彈框已存在則去掉，如果不存在則顯示var allMarkOverlay = map.getOverlays();if (allMarkOverlay[allMarkOverlay.length - 1]._name == "boxOverlay") {map.removeOverlay(allMarkOverlay[allMarkOverlay.length - 1])} else {showInfo(e)}} } componentDidMount() {this.getMap() } render() {return (<div id="map"></div> ) }} export default MapDemo;

6.在react中使用----修改默認(rèn)樓層

一般樓層默認(rèn)在一層，怎么修改默認(rèn)樓層呢
修改以下代碼即可～

var config1 = {// 沒有buildingId的話，無法修改默認(rèn)floorbuildingId: 'e96b44200baa3b4082288acc',floor: 'F4',}var indoorManager = new BMapLib.IndoorManager(map, config1);

總結(jié)

以上是生活随笔為你收集整理的百度地图api之室内地图----react的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。