今天遇到个客户嫌高德地图收费要用天地图，真无语啊，我都不知道天地图是个什么鬼，ε=(´ο｀*)))唉，真是够够的啊，
话不多说上代码
因为查了很多资料发现好像没有关于App用天地图的，于是我想到用uni自带的web-view来直接对接上自己写的html页面部署一下不就行了，
1.先在随便建一个文本文档
后缀改成html
2.在此页面写入代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="天地图" />
<title>选择地址</title>
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=天地图申请的秘钥">
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#mapDiv {
width: 100%;
height: 100vh;
margin-bottom: 40px;
overscroll-behavior: contain;
}
#addressDiv {
border-bottom: 1px solid #cecece;
padding: 30px 20px;
display: flex;
/* align-items: center; */
font-size: 34px;
text-align: center;
margin: 0 20px;
z-index: 9999;
}
.addressDiv {
border-bottom: 1px solid #cecece;
padding: 30px 20px;
display: flex;
align-items: center;
font-size: 34px;
text-align: center;
margin: 0 20px;
z-index: 9999;
}
.box {
height: 700px;
width: 900px;
position: fixed;
bottom: 0;
background: #FFFFFF;
border-radius: 30px;
z-index: 999;
box-sizing: border-box;
margin: 0 30px;
display: flex;
flex-direction: column;
padding: 0px 0 30px 0;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.input-box {
height: 130px;
width: 880px;
position: fixed;
top: 0;
border-radius: 10px;
background: #FFFFFF;
margin: 0 30px;
z-index: 999;
padding: 0 20px;
display: flex;
align-items: center;
}
.input-text {
background-color: #e7e7e7;
border-radius: 10px;
width: 83%;
height: 90px;
font-size: 30px;
border: none;
padding: 0 20px;
margin-right: 30px;
outline: none;
}
.input-span {
font-size: 34px;
}
.title {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
font-weight: bold;
position: sticky;
top: 0;
background-color: #FFFFFF;
flex-shrink: 0;
padding-top: 20px;
}
#hidden {
display: none;
}
#box-item {
display: flex;
flex-direction: column;
padding: 30px 20px;
width: 860px;
border-bottom: 1px solid #cecece;
justify-content: space-between;
font-size: 34px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<div class="input-box">
<input type="text" class="input-text" id="keyword" placeholder="请输入地址名称">
<div class="input-span" οnclick="search()">搜索 </div>
</div>
<div id="boxscroll" class="box">
<div class="title">请选择位置</div>
<div id="addressDivv" style="display: block;" οnclick="toparr()">
<div id="addressDiv"></div>
</div>
<div id="result" style="display: none;" class="box-item">
</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
// uni.webView.navigateTo(...)
});
</script>
<script type="text/javascript">
var lngs;
var lats;
var addressdan;
var map;
var marker;
var add;
var page = 1;
var response;
window.onload = function() {
var container = document.getElementById('boxscroll');
container.addEventListener('scroll', function() {
// 获取div元素的内容高度
var contentHeight = container.scrollHeight;
// 获取div元素的可视区域高度
var containerHeight = container.clientHeight;
// 获取滚动条的位置
var scrollPosition = container.scrollTop;
// 判断是否滑动到底部
if (scrollPosition + containerHeight >= contentHeight) {
// 执行滑动到底部时的操作
yourFunction(); // 替换为您想要执行的函数或代码
}
});
};
function yourFunction() {
// 在这里编写您想要执行的代码
page++;
sendRequest();
}
// 获取当前位置
function onLoad() {
map = new T.Map("mapDiv");
map.centerAndZoom(new T.LngLat(116.397428, 39.90923), 30);
// 获取当前位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 在地图上显示当前位置的图标
var icon = new T.Icon({
iconUrl: 'https://micell-1313053831.cos.ap-beijing.myqcloud.com//uploads/20231218/bafda38d64181acfbe3a08e34cb936ee.png',
iconSize: new T.Point(40, 47),
iconAnchor: new T.Point(12, 41)
});
marker = new T.Marker(new T.LngLat(lng, lat), {
icon: icon
});
map.addOverLay(marker);
// 将地图中心点移动到当前位置
map.panTo(new T.LngLat(lng, lat));
// 显示当前位置的详细地址
getAddress(lng, lat);
});
}
// 点击地图获取位置
map.addEventListener("click", function(e) {
var lnglat = e.lnglat;
var lng = lnglat.lng;
var lat = lnglat.lat;
// 移除之前的图标
map.removeOverLay(marker);
showDiv()
resulthideDiv()
// 在点击位置显示图标
var icon = new T.Icon({
iconUrl: 'https://micell-1313053831.cos.ap-beijing.myqcloud.com//uploads/20231218/bafda38d64181acfbe3a08e34cb936ee.png',
iconSize: new T.Point(40, 47),
iconAnchor: new T.Point(12, 41)
});
marker = new T.Marker(new T.LngLat(lng, lat), {
icon: icon
});
map.addOverLay(marker);
// 将地图中心点移动到点击位置
map.panTo(new T.LngLat(lng, lat));
// 显示点击位置的详细地址
getAddress(lng, lat);
});
}
// 获取地址信息
function getAddress(lng, lat) {
var geocoder = new T.Geocoder();
geocoder.getLocation(new T.LngLat(lng, lat), function(result) {
var address = result.getAddress();
console.log(address);
addressdan = result.getAddress();
lngs = lng
lats = lat
document.getElementById("addressDiv").innerHTML = "详细地址：" + address;
});
}
window.onload = onLoad;
var result = []
// 搜索位置
function sendRequest() {
console.log(page,'页数');
if (!document.getElementById("keyword").value) {
return;
}
hideDiv();
resultshowDiv();
var keyword = document.getElementById("keyword").value;
var xhr = new XMLHttpRequest();
var url = "https://api.tianditu.gov.cn/v2/search?postStr={\"keyWord\":\"" + keyword +
"\",\"level\":12,\"mapBound\":\"117.24,34.22,119.11,36.13\",\"queryType\":" + '7' + ",\"start\":" + page *
10 + ",\"count\":10}&type=query&tk=天地图申请的秘钥"
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
response = JSON.parse(xhr.responseText);
if (page === 1) {
result = response.pois
printNumbers(result);
} else {
result = result.concat(response.pois);
printNumbers(result);
}
hideDiv();
}
};
xhr.send();
console.log(111);
}
// 点击搜索
function search(){
page=1
response=''
sendRequest()
}
// 渲染位置信息
function printNumbers(response) {
if (!response) {
alert('暂无该地区，或手动选择')
return
} else {
console.log(response, '方法');
add = response
var output = "";
var outputname = '';
var html = ''
for (var i = 0; i < response.length && response; i++) {
output += response[i].name;
outputname += response[i].address
html += `
<div id='box-item' οnclick="handleClick(${i})">
<div id="arrdi" >${response[i].name}</div>
<div id="arrname" style='font-size: 30px;
color: #626262;'>${response[i].address}</div>
</div>`
document.getElementById("result").innerHTML = html;
}
}
}
function hideDiv() {
// 隐藏
document.getElementById("addressDivv").style.display = "none";
}
function showDiv() {
// 显示
document.getElementById("addressDivv").style.display = "block";
}
function resulthideDiv() {
// 隐藏
document.getElementById("result").style.display = "none";
}
function resultshowDiv() {
// 显示
document.getElementById("result").style.display = "block";
}
// 点击列表单个位置
function handleClick(event) {
uni.postMessage({
data: {
type: 'saveaAlbum',
data: add[event],
}
});
uni.navigateBack()
}
// 点击地图获取的位置
function toparr() {
var objlist = {
'name': addressdan,
'lonlat': lngs + ',' + lats
}
console.log(objlist, 'list');
uni.postMessage({
//这里是带参数返回uni
data: {
type: 'saveaAlbum',
data: objlist
}
});
uni.navigateBack()
}
</script>
</html>
运行到浏览器就可以
下面这句话重要！！！
使用途中如果地图加载的慢请访问这个链接将代码拉下来，自己建个文本文档改成.js,将拉下来的代码放进去，
https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js然后将这个js文件部署，
然后将HTML里的这句代码
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
改成<script type="text/javascript" src="部署的js地址"></script>
这样就可以解决地图加载慢的问题了
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
