我的需求是
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>

總結

以上是生活随笔為你收集整理的小程序 地图 开发 组件 覆盖物的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。