高德地图导航，用处非常广泛，今天小编通过本文给大家分享微信小程序引入map组件并在地图上标点的实现方法，先给大家展示下效果图感觉不错可以参考实现代码。

效果：

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

复制粘贴即可

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.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不撑满地图的水印会显示出来不太好看

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

解决方法：

可以像我一样在底部加上定位的字体说明，设置一个背景给他挡住，或者page设置100%，让底部导航给他挡住即可。至于有没有方法设置让水印不显示，有知道的小伙伴可以留言给我，我就不研究啦~

到此这篇关于微信小程序引入map组件并在地图上标点的文章就介绍到这了,更多相关微信小程序map组件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。