微信小程序引入map组件并在地图上标点的实现代码

这篇文章主要介绍了微信小程序引入map组件并在地图上标点,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

复制粘贴即可

map.wxml

      目前查到巡检工单未处理完成的商家有4户请缩放并滑动地图以查看更多区域的商户

map.js

// pages/home/home.js Page({ /** * 页面的初始数据 */ 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不撑满地图的水印会显示出来不太好看