React中使用百度地圖——基本使用

React中使用百度地圖——基本使用

?**文檔: http://lbsyun.baidu.com/index.php?title=jspopular 百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口,可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應用,支持PC端和移動端基于瀏覽器的地圖應用開發(fā),且支持HTML5特性的地圖開發(fā)。 百度地圖JavaScript API支持HTTP和HTTPS,免費對外開放,可直接使用。

接口使用無次數(shù)限制。

在使用前,您需先 申請密鑰(ak) 才可使用。在您使用百度地圖JavaScript API之前,請先閱讀 百度地圖API使用條款 。任何非營利性應用請直接使用,商業(yè)應用請參考 使用須知 。 首先,在 index.html 中添加: 然后,在腳手架中組件化。

如果使用webpack打包,則在 webpack.base.config.js 中添加以下配置; **,在組件中引用: 1、初始化地圖 這里使用MapBD組件來封裝百度地圖,使用組件內(nèi)導入方式來導入百度地圖js,在this.asyncLoading()中調(diào)用初始化方法:this.initMap() 2、添加控件 百度地圖提供的控件: 添加自帶的定位控件: 注意:有些公司**會禁用百度地圖定位接口,導致定位失敗。 3、自定義定位功能 百度地圖自帶的定位控件一般不滿足UI需求,需要自定義定位控件和定位功能。 4、智能搜索 根據(jù)地名從百度地圖中檢索地址。

5、添加覆蓋物 可以使用map.addOverlay方法向地圖添加覆蓋物,使用map.removeOverlay方法移除覆蓋物,注意此方法不適用于InfoWindow。 百度地圖API支持添加覆蓋物,但是使用自定義圖標時,一般需要設(shè)置偏移。

如何在React組建中使用百度地圖api

在這里我只簡單的演示一下定位API的使用:1.直接在你的目標HTML中引用百度地圖API:在AK中填寫你APP在百度地圖API上申請到的AK。2.直接在你的React的構(gòu)造方法(ES6)中或者你其他相應的方法中使用百度地圖的js方法:3.千萬別糾結(jié)在組件里怎么引用百度的API,怎么動態(tài)的在<script>標簽里加載百度API,我只能告訴你,不是簡簡單單的就能實現(xiàn),因為如果進去看看你引用的api的源碼,你會發(fā)現(xiàn)百度使用了document.write方法,而在js中,是不允許動態(tài)加載的script使用這個方法的,也許有解決的辦法,反正我不知道,所以我建議直接寫靜態(tài)方法。

react使用react-amap地圖組件

npm install –save react-amap react-amap包含地圖,覆蓋物,信息窗體3類組件 <Map amapkey={\’788e08def03f95c670944fe2c78fa76f\’}/> 需要在地圖上啟用鼠標工具插件時使用;啟用該插件可以進行鼠標畫標記點、線、多邊形、矩形、圓、距離量測、面積量測、拉框放大、拉框縮小等功能。 constructor(){ this.mapPlugins = [\’ToolBar\’]; this.mapCenter = {longitude: 120, latitude: 35}; } <Map plugins={this.mapPlugins} center={this.mapCenter} > 在地圖上創(chuàng)建一個圖標,組件要放在地圖組件Map里面,position表示坐標, Marker 的外觀可以通過設(shè)置style自定義,還可以通過events綁定事件 this.markerPosition = {longitude: 121, latitude: 36}; <Marker position={this.markerPosition}?events={this.markerEvents}/> 在地圖上創(chuàng)建大量圖標; const randomPosition = () => ({ longitude: 100 + Math.random() * 20, latitude: 30 + Math.random() * 20 }) const randomMarker = (len) => ( Array(len).fill(true).map((e, idx) => ({ position: randomPosition() })) ); markers: randomMarker(100), <Markers markers={this.state.markers} /> 在地圖上一個多邊形或者環(huán)狀多邊形時使用;?const randomPath = () => ({ longitude: 100 + Math.random() * 50, latitude: 10 + Math.random() * 40, }) this.state = { visible: true, draggable: true, path: Array(4).fill(true).map(randomPath), } this.events = { click: (百科) => {console.log(\’clicked\’)}, created: (ins) => {console.log(ins)}, mouseover: () => {console.log(\’mouseover\’)}, dblclick: () => {console.log(\’dbl clicked\’)} }; <Polygon events={this.events} path={this.state.path} draggable={this.state.draggable} visible={this.state.visible} />在地圖上一個折線段的時候; const randomPath = () => ({ longitude: 60 + Math.random() * 50, latitude: 10 + Math.random() * 40, }) this.state = { visible: true, draggable: true, path: Array(5).fill(true).map(randomPath), }; this.lineEvents = { created: (ins) => {console.log(ins)}, show: () => {console.log(\’line show\’)}, hide: () => {console.log(\’line hide\’)}, click: () => {console.log(\’line clicked\’)}, } <Polyline path={ this.state.path } events={ this.lineEvents } visible={ this.state.visible } draggable={ this.state.draggable } />?需要在地圖上顯示一個圓形時; const randomIndex = (len) => (Math.floor(Math.random() * len)); const randomColor = () => { const chars = \’0123456789abcdef\’.split(\’\’); const len = chars.length; return `#${chars[randomIndex(len)]}${chars[randomIndex(len)]}` + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}` + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}`; }; this.state = { center: {longitude: 120, latitude: 20}, radius: 15000, visible: true, style: {strokeColor: \’#f00\’}, draggable: true, }; this.circleEvents = { created: (ins) => {console.log(window.circle = ins)}, click: () => {console.log(\’clicked\’)}, mouseover: () => {console.log(\’mouseover\’)}, } <Circle center={ this.state.center } radius={ this.state.radius } events={ this.circleEvents } visible={ this.state.visible } style={ this.state.style } draggable={ this.state.draggable } /> 需要在地圖上特定邊界區(qū)域內(nèi)顯示一張圖片時使用;?this.events = { created: (i) => {console.log(i)}, click: () => {console.log(\’img click\’)}, dblclick: () => {console.log(\’img dblclick\’)}, }; this.state = { src: this.pics[0], visible: true, opacity: 1, bounds: bc.bounds, mapCenter: bc.center, }; <GroundImage visible={this.state.visible} events={this.events} bounds={this.state.bounds} src={this.state.src} opacity={this.state.opacity} clickable />需要在地圖上顯示一個信息窗體的時候使用;在一個地圖上最多只能同時顯示一個信息窗體。

React-Native-IOS使用高德地圖

在github上找了好幾個使用React Native封裝基于ios的高德地圖的依賴,但是大多數(shù)依賴無論手動連接還是自動連接都會有報錯,個人感覺**的可能就是不兼容現(xiàn)在的react-native^0.42.0,**找到兩個可以在IOS上顯示的高德地圖依賴和一個可以定位的依賴。 可以顯示高德地圖,配置過程也非常簡單,只需執(zhí)行如下兩個命令,運行時模擬器中地圖顯示的是英文,真機上地圖顯示的漢字,但是樣式看上去有點奇怪,不知道是不是版本老的原因。

雖然這個依賴顯示了高德地圖,但是經(jīng)過這些安裝高德地圖的試驗,我感覺這個依賴很奇怪。

(1)沒有看到高德地圖相關(guān)的文件 MAMapKit.framework、AMapFoundationKit.framework、AMapSearchKit.framework ;(2)沒有進行高德key值的配置,個人感覺在 react-native-maps/ios/AirMaps/AIRMapManager.m 文件中,31行應該是輸入高德key值的地方。 在ios上,可以按照說明文檔進行配置,也就是手動鏈接。我是先執(zhí)行 react-native link react-native-**art-amap 進行自動鏈接,然后再按照說明文件進行配置,需要注意的地方有兩點: 這時的運行結(jié)果如下圖所示,地圖上并沒有標注出坐標的位置,查了issuse列表看到別也提了這個問題,估計是依賴的問題,我就查了一下依賴的源碼,試著找了一下,發(fā)現(xiàn)將 react-native-**art-amap/ios/RCTAMap/RCTAMap/RCTAMapManager.m文件中422、423、424行的NO改為YES ,地圖上的位置標注就出來了,如下圖所示。 以上都是在ios上的配置,在android端也有需要注意的地方。

上一篇 React-Native-Android使用高德地圖 已經(jīng)講了在android上使用高德地圖,如果想在android端也使用react-native-**art-amap這個依賴來保持一致的話,需要先將android/setting.gradle、android/app/build.gradle、MainApplication.java中關(guān)于react-native-amap-android的配置去掉,然后再按照說明文檔配置react-native-**art-amap,否則會報兩個錯誤。 **個錯誤如下圖所示,解決辦法是將gradle.properties文件中被注釋的 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 放開。 第二個錯誤如下圖所示,是由于包沖突,因為已經(jīng)存在一個高德地圖的依賴了,解決辦法就是將android/setting.gradle、android/app/build.gradle、MainApplication.java中關(guān)于react-native-amap-android的配置去掉,只保留一個高德地圖的配置。

而且android也是存在位置標注不顯示的問題,需要將 react-native-**art-amap/android/src/main/reactnativecomponent/amap/RCTAMapView.java文件的202行注釋放開 ,地圖上的位置標注就出來了,如下圖所示。

RN集成react-native-baidu-map及解決遇到的問題

創(chuàng)建一個React-native項目,并加入百度地圖的插件的方法: 1,react-native init –version=\”0.55.4\” BaiduMapDemo?//新建一個目錄,創(chuàng)建名為?BaiduMapDemo 的項目, 出現(xiàn)如圖所示: 2,cd?BaiduMapDemo //進入BaiduMapDemo 下 3,yarn add react-native-baidu-map 或者?npm install react-native-baidu-map–save 添加react-native-baidu-map插件 (安裝開源項目庫) 4,配置index.jsAPP是默認的項目名稱,這里創(chuàng)建項目時,項目名稱是BaiduMapDemo, 5,setting.gradle中添加: include\’:react-native-baidu-map\’project(\’:react-native-baidu-map\’).projectDir =newFile(settingsDir,\’../node_modules/react-native-baidu-map/android\’)6,app/build.gradle的dependencies中添加7,MainApplication.java中添加:8,在AndroidMainifest.xml中添加,注意:權(quán)限不要重復添加,react-native編譯有時不通過。9,application標簽內(nèi)添加10,然后,編譯一下,發(fā)現(xiàn)項目中會出現(xiàn)react-native-baidu-map模塊,會報錯, 然后解決問題: 1,createJSModules不是重寫方法 2,WebView的修改:從React15.5起,React.PropTypes被移入到單獨的package中。

react提供了一個package(prop-types)去檢查props的類型。

首先需要將prop-types引用到文件中。 更改項目中對組件原的引用方式,在此項目中需要在node_modules\\react-native-baidu-map\\js\\MapView.js文件中 3,?項目能運行,地圖不顯示。 主要因為keystore和及其配置。 把keystore拷貝到 項目\\android\\keystores目錄下, 并在 項目\\android\\app\\build.gradle中配置 (4) 提示MainActivity不存在 Activity is not exist 項目\\android\\app\\src\\main\\AndroidManifest.xml中的 package 與 項目\\android\\app\\build.gradle中的applicationId保持一致。

react處理object中的map**

對于數(shù)組和object對象的數(shù)據(jù)獲取,react是比較容易獲取的,但是前段時間開發(fā)過程中遇到過map**的數(shù)據(jù),數(shù)據(jù)格式如下: 當然這是簡化后的數(shù)據(jù)。 對于這種對象的獲取其實直接通過list.actions.create和list.actions.delete是可以獲取到的,但是我們從后臺獲取到數(shù)據(jù)后并不能確定map中的key值,以及map的個數(shù)。