Android 端
private void initWebView(){
webView.addJavascriptInterface(this, "bridge");
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
// 这一行必须写
settings.setDomStorageEnabled(true);//开启DOM
}
/**
* 这个是js调用java的方法
*/
@JavascriptInterface
public void loadSuccess() {
Log.i("loadsuccess", "location");
loadComplete = true;
}
// java 调用js
JSONObject object = new JSONObject();
try {
object.put("x", x);
object.put("y", y);
object.put("floorId", floorId);
object.put("direction", -direction);
} catch (JSONException e) {
e.printStackTrace();
}
final String location = object.toString();
runOnUiThread(new Runnable() {
@Override
public void run() {
// 这个必须加
if (loadComplete) {
webView.loadUrl("javascript:" + "" + "getLocation" + "(" + location + ")");
}
}
});
react 端
import React from 'react';
import styles from './index.less'
// 可以调用了
window.getLocation = function(obj){
if(!!window.callback){
window.callback.getLocation(obj)
}
}
// React 类的实例暴露给window 就可以了。
window.setCallback = function(callback){
window.callback = callback
}
class Index extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
window.setCallback(this);
}
componentDidMount() {
/**
* 初始化参数,默认使用在线数据,从蜂鸟视图数据服务器加载模型数据
* https://www.fengmap.com/docs/js/v2.5.0/fengmap.FMMap.html
**/
var mapOptions = {
//必要,地图容器
container: document.getElementById('fengMap'),
//必要,地图应用名称,通过蜂鸟云后台创建
appName: '蜂鸟研发SDK_2_0',
//必要,地图应用密钥,通过蜂鸟云后台获取
key: '57c7f309aca507497d028a9c00207cf8'
};
//初始化地图对象
this.map = new window.fengmap.FMMap(mapOptions);
//打开Fengmap服务器的地图数据和主题
this.map.openMapById('cxdsf14', function (error) {
//打印错误信息
console.log("ddd");
});
//地图加载完成事件
this.map.on('loadComplete', function () {
try{
console.log('地图加载完成=====')
window.bridge.loadSuccess();
}catch (e) {
}
});
this.map.on('mapClickNode',function(e){
console.log(e,'diaji ');
})
}
getLocation(obj){
var x = obj.x;
var y = obj.y;
var floorId = obj.floorId;
var direction = obj.direction;
console.log(x);
console.log(y);
console.log(floorId);
console.log(direction);
}
render() {
return (
<div className={styles.container} id='fengMap'>
</div>
)
}
}
export default Index;