微信小程序map组件
记录一下在使用map组件的时候所遇到的问题
在map组件这块,我主要要实现的功能有
(1)获取当前位置,并标记
(2)点击回到当前位置为中心
(3)搜索目的位置
(4)匹配停车位并显示在地图上
1.map组件的使用
(https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
参考官方文档基本就能实现
最主要的几个参数有:latitude,longitude
地图中心的经纬度,scale
缩放级别 ,markers
标记点,show-Location
是否显示当前定位。
<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="20" markers="{{markers}}" show-location
enable-3D="true" style="width: 100%; height:600px;">
</map>
里面的latitude和longitude我都是获取的当前定位
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
that.requestLocation();
},
requestLocation: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
})
that.moveTolocation();
},
})
},
2.定位精确性问题
map组件中的show-location方法获取的定位点和,getLocation方法所获取的定位点不一致。
在map组件中有一个show-location属性,设置为true,就会显示一个绿色的当前位置的点。
使用getLocation获取当前位置,在markers中标记之后也可以获取当前位置的点
但是一开始两个点不一致。
后来查询之后发现是两个方法所用的坐标系不一致,将getLocation中的type设置为国测局坐标// GPS坐标系 // type:'wgs84', // 国测局火星坐标系 type:'gcj02',
之后坐标变为一致
3.点击标签回到当前位置为中心
页面展示标签官方说是可以用cover-view,但调试时有说现在可以同层渲染了,支持用view。也就是说可以直接使用view作为页面上的标签。
<view bindtap="clearInput">
<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="20" markers="{{markers}}" show-location
enable-3D="true" style="width: 100%; height:600px;">
</map>
<view class='cover-layout2'bindtap='selfLocationClick'>
<image class='listShow' src='../../images/parkingList/list.png'></image>
</view>
</view>
核心方法
//调整重心位置和缩放级别
selfLocationClick: function () {
var that = this;
//还原默认缩放级别
that.setData({
scale: defaultScale
})
//必须请求定位,改变中心点坐标
that.requestLocation();
},
//请求地理位置
requestLocation: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
})
that.moveTolocation();
},
})
},
/**
* 移动到中心点(核心的方法)
*/
moveTolocation: function () {
var mapCtx = wx.createMapContext(mapId);
mapCtx.moveToLocation();
},
4.搜索提示
主要实现在搜索框搜索,提示搜索内容并返回搜索目的地的坐标。用到了腾讯位置服务的方法
/**
*
*搜索框输入事件的绑定,
1.获取搜索的提示
2.获取目的地数据
suggestion数组中存放搜索的列表,inputVal中是最终选中的结果。
*/
inputTyping: function (e) {
qqmapsdk = new QQMapWX({
key: ''
});
var that = this;
qqmapsdk.getSuggestion({
keyword: e.detail.value,
success: function (res) {
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果,放到sug数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
that.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug,
showSuggestion: true
});
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
},
//选中推荐项
backfill: function (e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.data.suggestion.length; i++) {
var tem = [];
if (i == id) {
tem.push({ // 获取返回结果,放到sug数组中
title: this.data.suggestion[i].title,
id: this.data.suggestion[i].id,
addr: this.data.suggestion[i].address,
city: this.data.suggestion[i].city,
district: this.data.suggestion[i].district,
latitude: this.data.suggestion[i].latitude,
longitude: this.data.suggestion[i].longitude
});
console.log(this.data.suggestion[i]);
this.setData({
inputVal: this.data.suggestion[i].title,
inputDetile: tem
});
console.log(this.data.inputDetile)
}
}
},
5.搜索结果的展示
这个功能只是实现了简单的展示,对于搜索的结果并没有过滤处理。
CSDN-Ada助手: 非常感谢CSDN博主分享的“便利蜂实习总结”博客,我觉得这样的实习经历分享对其他用户尤为有益。下一篇博客可以考虑分享关于前端开发中的CSS技巧或者JavaScript开发中的设计模式,这些主题在实际工作中都非常实用,相信会有更多读者受益。期待你的下一篇精彩文章! 为了方便博主创作,提高生产力,CSDN上线了AI写作助手功能,就在创作编辑器右侧哦~(https://mp.csdn.net/edit?utm_source=blog_comment_recall )诚邀您来加入测评,到此(https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall)发布测评文章即可获得「话题勋章」,同时还有机会拿定制奖牌。
不正经的kimol君: 学到了,点赞支持
不正经的kimol君: 爱了爱了,写得确实不错哦,一起加油