思路：使用html+腾讯地图sdk进行编写，再让他部署成为一个url丢到webview里面和小程序进行交互，在开发过程中使用live server进行本地部署
先附上效果图
前言
由于项目需要一个需求，在地图上覆盖组件，本来以为很简单，谁知道小程序map组件权重最高，谁都盖不上去
然后官方提供的：cover-view，cover-image。使用起来及其shit，可能你在工具上没有问题，但是在手机上显示可能就会出现问题。还不支持很多css样式。然后就促使了我这个想法的诞生。
准备工作
使用live server把html文件映射出一个url地址
没啥好说的，直接安装好live server插件
然后安装好live server插件后在html文件里右键直接打开即可
然后你会发现有一个地址
后面的mini.html为你的这个html页面的文件名。
代码编写
在小程序开发人员工具里面的编写
小程序里面的代码编写不用多说
由于我们使用的是webview，所以我们只需要传一个地址过去，但是我们这个地址需要传参，需要把经纬度传过去
使用微信自带的api获取到经纬度然后放到url里面传过去即可
<web-view src="{{ url }}" />
Page({
data: {
latitude: null,
longitude: null,
url: null
},
onLoad() {
// 获取当前位置的经纬度
wx.getLocation({
type: 'gcj02',
success: ({ latitude, longitude }) => {
this.setData({
latitude,
longitude,
url: `http://127.0.0.1:5500/mini.html?latitude=${latitude}&longitude=${longitude}`
})
}
})
}
})
在vscode里面的编写html
其他的核心业务需求，全部在html界面里面进行编写。由于微信官方提供了api可以和小程序进行交互使用
<!-- 直接引入之后就可以在webview里面和小程序交互使用了 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
我们如果只是做页面点击跳转的话
只需要调用这么一个api就可以进行页面的跳转了
有了这个，我们就可以为所欲为了
wx.miniProgram.navigateTo({url: '页面地址'})
我们首先开始引入腾讯地图提供的sdk
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=这里填写你的应用key"></script>
里头的应用key要自己去官网申请
引入这个腾讯地图的sdk之后，随便弄一个标签
<div id="container"></div>
然后就可以进行js代码的编写
const initMap = () => {
const
{ search } = window.location,
// 这一步是把从小程序传过来的url里面的经纬度参数拿过来，然后用于地图的展示位置
{ groups: { latitude, longitude } } = (/latitude=(?<latitude>.*?)&longitude=(?<longitude>.*)/g).exec(search),
center = new TMap.LatLng(latitude, longitude),
map = new TMap.Map('container', {
mapStyleId: 'style1', // 地图的样式id
zoom: 12,
center: center,
showControl: false
})
}
我直接在body标签的onload属性里面调用初始化了
<body onload="initMap()">
先把那个盒子的层级弄到最低，然后铺满屏幕
#container {
width: 100vw;
height: 100vh;
z-index: 0;
}
然后打开之后的效果是这样子的
嘿嘿，我们可以进行代码编写了，但是编写之前吧，有一件事
先把logo去掉
// 去掉logo
document.getElementsByTagName('canvas')[0].nextElementSibling.innerHTML = ''
效果如上图，看着好多了有没有，然后就开始编写你的业务逻辑了
业务逻辑就没啥好说的，你们自己的事情
我这边写好的界面效果如下
然后，最主要是就是那个车场的点击
直接写一个事件绑过去就好了
function goDetail() {
wx.miniProgram.navigateTo({
url: '跳转的页面地址'
})
}
在盒子上直接使用
<div class="list_item" onclick="goDetail()">
最后就是实现了你想要的效果啦，使用原生html+css+js写起来还是比使用map+cover-view+cover-image好的
路过的可以点个赞喔，谢谢啦
附上页面代码，地图应用key自己去官网拿
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择车场</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你自己的key"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<link rel="stylesheet" href="./mini.css">
<body onload="initMap()">
<div class="search">
<img src="./svg/search.svg" alt="">
<input type="text" placeholder="搜索位置">
</div>
<div class="list">
<div class="list_item" onclick="goDetail()">
<div class="title">
<div>
<div>
<img src="./svg/location.svg" alt="">
</div>
<div class="name">云停车场</div>
<div class="mark">最近</div>
</div>
<div>
<img src="./svg/vetor.svg" alt="">
</div>
</div>
<div class="info">
<div>
<span>空车位</span>
<span class="mark">3</span>
<span>个</span>
</div>
<div>
<span>空车位</span>
<span class="mark">3</span>
<span>个</span>
</div>
<div>
<span>空车位</span>
<span class="mark">3</span>
<span>个</span>
</div>
</div>
<div class="address">
<div>
<img src="./svg/address.svg" alt="">
</div>
<div class="name">广东省广州市天河广东省广州市广东省广州市天河区天河区广东省广州市天河区区</div>
</div>
<div class="phone">
<div>
<img src="./svg/phone.svg" alt="">
</div>
<div class="name">020-1234567889</div>
</div>
<div class="desc">
<div>
描述：07:00-21:00计费时段内，4小时以内<span>3元/
辆/次</span>，超过4小时<span>5元/辆/次</span>，跨天停车累计收费。
</div>
</div>
</div>
</div>
<div id="container"></div>
<script type="text/javascript">
const initMap = () => {
const
{ search } = window.location,
{ groups: { latitude, longitude } } = (/latitude=(?<latitude>.*?)&longitude=(?<longitude>.*)/g).exec(search),
center = new TMap.LatLng(latitude, longitude),
map = new TMap.Map('container', {
mapStyleId: 'style1',
zoom: 12,
center: center,
showControl: false
})
// 点标记
const markerLayer = new TMap.MultiMarker({
map: map,
styles: {
marker: new TMap.MarkerStyle({
width: 25,
height: 35
})
},
geometries: [
{
styleId: 'marker',
position: new TMap.LatLng(23.619132,113.583861)
},
{
styleId: 'marker',
position: new TMap.LatLng(23.640321,113.64614)
},
{
styleId: 'marker',
position: new TMap.LatLng(23.622876,113.768724)
},
{
styleId: 'marker',
position: new TMap.LatLng(23.547428,113.591727)
},
{
styleId: 'marker',
position: new TMap.LatLng(23.527939,113.598308)
},
{
styleId: 'marker',
position: new TMap.LatLng(23.526244,113.586541)
}
]
})
// 去掉logo
document.getElementsByTagName('canvas')[0].nextElementSibling.innerHTML = ''
}
</script>
</body>
<script>
function goDetail() {
wx.miniProgram.navigateTo({
url: '/pages/vehicle-admin/my-vehicle-detail-keep/index'
})
}
</script>
</html>
less代码
*{
margin: 0px;
padding: 0px;
}
#container {
width: 100vw;
height: 100vh;
z-index: 0;
}
.search {
z-index: 999;
position: fixed;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 20px;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
&>input {
border: 1px solid #f4f4f4;
padding: 10px 28px;
// padding-left: 30px;
border-radius: 20px;
width: 100%;
background-color: #f4f4f4;
outline: none;
font-size: 13px;
}
&>img{
position: absolute;
left: 30px;
}
}
.list {
z-index: 999;
position: fixed;
width: 100%;
box-sizing: border-box;
bottom: 10px;
padding: 5px 10px;
height: 200px;
overflow: auto;
.list_item {
background-color: #fff;
border-radius: 8px;
padding: 10px;
margin: 10px 0;
transition: background .2s;
&:active{
background-color: #ccc
}
&>div{
margin-bottom: 5px;
}
.title {
font-weight: bold;
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
&>div{
display: flex;
align-items: center;
img{
display: inline-block;
vertical-align: bottom;
}
&>.name{
margin-left: 5px;
}
&>.mark{
font-size: 12px;
font-weight: normal;
color: #fff;
border-radius: 10px;
padding: 0 8px;
margin-left: 10px;
background-color: #FF5A72;
}
}
}
.info {
display: flex;
background-color: #f4f4f4;
border-radius: 4px;
padding: 2px 0;
&>div {
flex: 1;
text-align: center;
font-size: 13px;
color: #333;
&>.mark{
color: blue;
}
}
}
.address,.phone{
font-size: 13px;
display: flex;
color: #333;
img{
display: inline-block;
vertical-align: bottom;
}
.name{
margin-left: 10px;
}
}
.desc{
font-size: 13px;
margin-bottom: 0;
background: rgba(255, 160, 119, 0.16);
padding: 5px 10px;
border-radius: 5px;
color: #333;
span{
color: #f60;
}
}
}
}
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
