网站管理系统排行榜,网站现状分析,wordpress.ort,科技助手我的需求是 1、显示地图 2、在地图上增加覆盖物 3、地图距离底部边距有90rpx 主要使用到原生组件map和cover-view
实现效果#xff1a;
代码我是使用的mpvue开发。源码如下#xff1a;
templatediv classmap-clockmap idmap…我的需求是 1、显示地图 2、在地图上增加覆盖物 3、地图距离底部边距有90rpx 主要使用到原生组件map和cover-view
实现效果
代码我是使用的mpvue开发。源码如下
templatediv classmap-clockmap idmap longitude113.324520 latitude23.099994 scale14 :markersmarkers :polylinepolyline show-location/mapcover-view classcontrolscover-view地图控件/cover-view/cover-viewfooter classac-footerdiv classaui-footer-btn aui-order-pricespan classaui-order-price-textspan打卡次数 /spanspan classde-price500/span/span/diva hrefjavascript:; classaui-footer-btn坐标打卡/a/footer/div
/templatescript
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}]}},
}
/scriptstyle langless 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
