在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.340739let 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) {super(props);this.state = {}; } getMap=()=>{let lng = 116.340739let lat = 40.03592// 創建Map實例,初始化地圖， 設置中心點坐標和地圖級別,19表示室內地圖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)// 隱藏圖標文字indoorManager.hideLabels();// 顯示圖標文字// indoorManager.showLabels();// 隱藏室內圖底圖indoorManager.hideBaseMap();// 顯示室內圖底圖// indoorManager.showBaseMap(); } componentDidMount() {this.getMap() } render() {return (<div id="map"></div> ) }} export default MapDemo;

5.在react中使用----創建復雜的覆蓋物

比如自定義標簽，自定義的彈框，以點擊某個marker出現對應彈框為例

加入以下代碼

創建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)

創建覆蓋物–彈框

// 自定義覆蓋物 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;//具體彈框樣式設置，省略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";} //渲染覆蓋物 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// 創建Map實例,初始化地圖， 設置中心點坐標和地圖級別,19表示室內地圖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)// 隱藏圖標文字indoorManager.hideLabels();// 顯示圖標文字// indoorManager.showLabels();// 隱藏室內圖底圖indoorManager.hideBaseMap();// 顯示室內圖底圖// 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);} //點擊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中使用----修改默認樓層

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。