目录
1.前言总结
2.技术介绍和实现结果
1.前言总结
本篇文章讲的是uniapp中map组件的详细总结，包括本人在开发阶段遇到的一些问题，也算是记了一次笔记，希望对大家有所帮助。
map组件仅用于展示地图，而定位API只是获取坐标，使用map组件的时候一般都要配合uniapp的定位API(uni.getLocation)一起使用
2.技术介绍和实现结果
首先看成品：
map组件的属性和回调比较多，在这里就不一一介绍了，大家可以移步unapp官网进行查看
下面直接给大家上全部的详细源码（可直接复制使用）：
这个组件的实现前提是要拿到自身的经纬度，这就需要用到uni.getlocation()方法，使用uni.getlocation()方法需要进行一些配置，分别是一下几个方面：
（1）配置小程序的appid
如果没有配置小程序appid的要配置一下，以下两种方法都可以实现。
（2）微信小程序位置权限接口
在app.json中配置一下代码
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
在manifest.json中打开微信小程序位置接口权限
做好以上配置，就可以获取自身的经纬度了
获取到经纬度，将它赋值给map组件的属性，就可以得到自身的坐标了，然后使用以下方法就可以实现拖拽之后，点击定位返回自身所在位置
//定位
onControltap() {
this.getLocation()
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.latitude,
longitude: this.longitude,
});
console.log('定位');
},
本期的总结就到这里了，可能有些方面的讲的不够详细，不懂得可以评论区留言或者私信，看到必回。谢谢大家得观看。