最近公司有一款微信小程序做版本迭代，要去掉原来的wepy框架，换成原生的，加之新版本改动较大，几乎所有的业务和逻辑都要重写，涉及的逻辑层面很广，今天就先教大家如何在微信里面使用地图组件吧~
效果如下图所示：
map.png
为了节省大家的学习成本我会把源码放在下方，直接copy可用哦
wxml部分：
<view class="container">
<map id="aroundMap"
style="width: 100%;height:100%;"
markers="{{markers}}"
scale="{{scale}}"
latitude="{{latitude}}"
longitude="{{longitude}}"
show-location>
</map>
</view>
wxss部分：
请设置page高度为百分百，否则地图可能会没有高度
page{
height:100%;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
z-index: 1
}
#aroundMap{
width: 100%;
height: 100%;
background-color: #eeeeee;
}
js部分:
Page({
data: {
markers: [],
latitude: '',
longitude: '',
scale: 16,
},
onLoad: function () {
var that = this;
wx.showLoading({
title: "定位中",
mask: true
});
wx.getLocation({
type: 'gcj02',
altitude: true,//高精度定位
//定位成功，更新定位结果
success: function (res) {
that.setData({
longitude: res.longitude,
latitude: res.latitude
});
},
//定位失败回调
fail: function () {
wx.showToast({
title: "定位失败",
icon: "none"
});
},
complete: function () {
//隐藏定位中信息进度
wx.hideLoading()
}
});
},
});
怎么样？这篇文章有没有帮助到你呢？如果有的话免费的小红心记得点一点哦~
