效果：
复制粘贴即可
map.wxml
<!-- 这是地图部分 --><view class="map_container"><map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'show-location></map><view class="map_text"><view>目前查到巡检工单未处理完成的商家有4户</view><view>请缩放并滑动地图以查看更多区域的商户</view></view></view>
map.js
// pages/home/home.jsPage({/*** 页面的初始数据*/data: {stitle: '东明路街道',latitude: "31.146740",longitude: "121.527690",scale: 14,//缩放级别，取值范围为3-20// markers Array标记点markers: [//标记点，传入经纬度，更多详细参数见官网{latitude: "31.146740",longitude: "121.527690",}],},/*** 生命周期函数--监听页面加载* 页面开始加载 就会触发*/onLoad() {//获取当前的地理位置//赋值经纬度this.setData({latitude: "31.146740",longitude: "121.527690",})},})
map.wxss
page {height: 90%;}.map_container {height: 100%;width: 100%;position: relative;}.map_text {background: #fff;height: 70rpx;width: 100%;position: absolute;bottom: 0;right: 0;padding:10rpx 20rpx;}.map_text view{font-size: 24rpx;padding-bottom:5rpx;color: #5A5A5C;}.map {height: 100%;width: 100%;}
注意：如果page不撑满地图的水印会显示出来不太好看
解决方法：
可以像我一样在底部加上定位的字体说明，设置一个背景给他挡住，或者page设置100%，让底部导航给他挡住即可。至于有没有方法设置让水印不显示，有知道的小伙伴可以留言给我，我就不研究啦~
