uniapp在H5和App使用百度地图的关键字提示输入、获取地图信息
·
登录百度账号 应用类别选择（浏览器端）
在根目录下的static/html创建Bmap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 100%;
width: 100%;
}
#myPageTop {
position: absolute;
top: 5px;
left: 10px;
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
padding: 6px;
font-family: "Microsoft Yahei", "���ź�", "Pinghei";
font-size: 14px;
}
#r-result {
position: absolute;
top: 1px;
right: 10px;
width: 100%;
}
.container {
width: 130px;
background-color: #fff;
position: absolute;
top: 5px;
right: 10px;
border-radius: 10px;
overflow: hidden;
padding: 6px;
}
.container .row2 {
margin: 6px 0;
}
.container .row3 {
text-align: center;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak">
</script>
<!-- 只对App有效 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<title>手动定位</title>
</head>
<body>
<div id="l-map"></div>
<div class="container">
<div class="row1">经度: <span class="lng"></span></div>
<div class="row2">纬度: <span class="lat"></span></div>
<div class="row3"><button onclick="btn" id="btn">确认</button></div>
</div>
<div id="myPageTop">
<table>
<tbody>
<tr>
<td>
<label>请输入关键字：</label>
</td>
</tr>
<tr>
<td>
<input type="text" size="24" id="suggestId">
</td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="r-result">请输入:<input type="text" size="20" value="百度" style="width:150px;" /></div> -->
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
let dom = document.querySelector('.container .lng')
let dom2 = document.querySelector('.container .lat')
let dom3 = document.querySelector('#suggestId')
setTimeout(() => {
setLngLat(lng, lat)
dom3.value = address
}, 500)
let btn = document.querySelector('#btn')
btn.addEventListener('click', function() {
let resultData = {
lng: Number(dom.value),
lat: Number(dom2.value),
address: dom3.value
}
// #ifdef H5
window.parent.postMessage({
data:resultData
})
// #endif
// #ifdef APP-PLUS
uni.postMessage({
data:resultData
})
// #endif
});
var str = location.search.substr(1);
let strArr = str.split('&')
let lng = Number(decodeURIComponent(strArr[0].split('=')[1]))
let lat = Number(decodeURIComponent(strArr[1].split('=')[1]))
let address = decodeURIComponent(strArr[2].split('=')[1])
var map = new BMap.Map("l-map");
let point = new BMap.Point(lng, lat);
map.centerAndZoom(point, 19); // 初始化地图,设置城市和地图级别。
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); // 地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
let markerPoint = {
lng,
lat
}
map.addOverlay(new BMap.Marker(markerPoint)); // 添加标注
map.addEventListener('touchend', (e) => {
map.clearOverlays(); // 清除地图上所有覆盖物
map.addOverlay(new BMap.Marker(e.point)); // 添加标注
setLngLat(e.point.lng.toFixed(6), e.point.lat.toFixed(6))
});
function setLngLat(lng, lat) {
dom.innerText = lng
dom2.innerText = lat
dom.value = lng
dom2.value = lat
}
// 以下搜索框功能
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId",
"location": map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
let obj = local.getResults().getPoi(0)
if (obj) {
var pp = obj.point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 19);
let marker = new BMap.Marker(pp)
map.addOverlay(marker); //添加标注
setLngLat(pp.lng.toFixed(6), pp.lat.toFixed(6))
} else {
window.parent.postMessage({
type: "toast",
msg: "无经纬度",
})
}
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>在vue文件使用web浏览器组件引入
<template>
<view style="width: 100%; height: calc(100vh - 44px)">
<!-- 百度地图 -->
<web-view @message="message" :src="htmlUrl" :update-title="false"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
htmlUrl: ''
};
},
mounted() {},
onShow() {
// #ifdef H5
window.addEventListener("message", this.receiveMessage, false);
// #endif
},
onHide() {},
onUnload() {
// #ifdef H5
window.removeEventListener("message", this.receiveMessage)
// #endif
},
onLoad(e) {
// 获取从上一级页面的传递过来的经纬度
let lng = encodeURIComponent(e.lng || '114.24779')
let lat = encodeURIComponent(e.lat || '22.71991')
let address = encodeURIComponent(e.address || '')
this.htmlUrl =
`/static/html/Bmap.html?lng=${lng}&lat=${lat}&address=${address}`
},
methods: {
// H5端的方法
receiveMessage(event) {
let tempData = event.data.data
if (tempData?.type === 'toast') {
uni.showToast({
title: tempData.msg,
icon: "none"
})
}
console.log("tempData==", tempData);
if (tempData?.lat && tempData?.lng) {
// 在这里处理你的逻辑
}
},
// App端的方法
message(e) {
let tempData = e.detail.data[0]
if (tempData?.type === 'toast') {
uni.showToast({
title: tempData.msg,
icon: "none"
})
}
console.log("tempData==", tempData);
if (tempData?.lng && tempData?.lat) {
// 在这里处理你的逻辑
}
}
},
}
</script>
<style lang="scss" scoped>
</style>效果图
更多推荐
3
0- 0
已为社区贡献12条内容
所有评论(0)