android混合式开发加载天地图
1.创建项目
引入依赖
将目录切换为app目录在activity_main.xml写
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="0dp">
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
再到MainActivity类写
在onCreate方法里面写
webview = findViewById(R.id.webview);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //设置webview支持javascript
settings.setUseWideViewPort(true); //设置webview推荐使用的窗口,使html界面自适应屏幕
webview.setDefaultHandler(new DefaultHandler());
webview.setWebViewClient(new WebViewClient());
webview.loadUrl("file:///android_asset/dist/index.html");
再到清单列表中加入网络加载权限
Vue代码如下
<template>
<div class="main">
<el-button @click="local" style="position: absolute;top: 10%; z-index: 1000">默认按钮</el-button>
<el-button @click="back" style="position: absolute;top: 10%;right: 0; z-index: 1000">返回</el-button>
<div id="map">
</div>
</div>
</template>
<script>
// import IP from '@/netWork/requestIp';
// import Trans from '@/api/transform'
export default {
name: "index",
data() {
return {
map: null,
locationLayer: null,
coordtransform: null,
}
},
created() {
// this.common.documentInit();
},
computed: {},
mounted() {
this.init();
window.callJsFunction = this.callJsFunction;
// this.timer = setInterval(this.local, 1000);
},
methods: {
/**
* 初始化
*/
init() {
// this.coordtransform = Trans.init();
this.mapInit();
// let center = this.webMercator2lonLat([13134068.526061961427331, 4044242.124333931598812]);
// this.currentLocation(center,280);
},
back() {
this.$router.push({name:'index'});
},
mapInit() {
let that = this;
let center = that.webMercator2lonLat([13134068.526061961427331, 4044242.124333931598812]);
let layer = L.tileLayer('http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1');
this.map = L.map("map", {
center: center, // 地图中心
zoom: 14, //缩放比列
layers: [layer],
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false // 移除右下角leaflet标识
});
},
//墨卡托转经纬度
webMercator2lonLat: function (mercator) {
var lonlat = [];
var x = mercator[0] / 20037508.34 * 180;
var y = mercator[1] / 20037508.34 * 180;
y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
lonlat[0] = y;
// lonlat[1] = parseFloat(y.toFixed(4));
lonlat[1] = x;
return lonlat;
},
}
}
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
效果图如下