我的需求是
1、显示地图
2、在地图上增加覆盖物
3、地图距离底部边距有90rpx
主要使用到原生组件map
和cover-view
实现效果:
代码我是使用的mpvue
开发。源码如下:
<template>
<div class="map-clock">
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" :markers="markers" :polyline="polyline" show-location></map>
<cover-view class="controls">
<cover-view>
地图控件
</cover-view>
</cover-view>
<footer class="ac-footer">
<div class="aui-footer-btn aui-order-price">
<span class="aui-order-price-text">
<span>打卡次数 </span>
<span class="de-price">500</span>
</span>
</div>
<a href="javascript:;" class="aui-footer-btn">坐标打卡</a>
</footer>
</div>
</template>
<script>
export default {
data() {
return {
markers: [{
iconPath: "../../static/images/map/marker.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}]
}
},
}
</script>
<style lang="less" scoped>
.map-clock {
width: 100%;
height: calc(100vh - 90rpx);
position: relative;
#map {
width: 100%;
height: 100%;
}
// 底部按钮
.ac-footer {
width: 100%;
position: relative;
z-index: 102;
display: flex;
align-items: center;
padding: 0;
background-color: rgba(255, 255, 255, 0.96);
box-shadow: 0 -2px 15px #dedede;
height: 90rpx;
.aui-footer-btn {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #4499ff;
height: 100%;
font-size: 14px;
font-weight: bold;
.de-price {
font-size: 18px;
font-weight: bold;
}
}
.aui-order-price {
background: #fff;
color: #4499ff;
position: relative;
}
}
}
.controls {
position: absolute;
top: 30rpx;
left: 30rpx;
height: 50px;
background: #4499ff;
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
box-shadow: 0 -2px 15px #dedede;
font-size: 12px;
}
</style>