uni-app:在地图上定位自己的位置(hbuilderx 3.6.18)
一,代码:
说明:向markers数组中push数据或直接修改数组中的数据都不会引起map的刷新,
注意使用这个方法: this.markers = [...markers];
<template> <view> <map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"> </map> </view> </template> <script> export default { data() { return { latitude:'', longitude:'', markers:[], } }, onLoad(){ uni.getLocation({ type:'gcj02', success:(res)=>{ console.log(res); this.latitude = res.latitude; this.longitude = res.longitude; console.log(this.markers); let markers = [{ latitude:res.latitude.toString(), longitude:res.longitude.toString(), iconPath:'/static/uni.png', width:"30", height:"30", }]; this.markers = [...markers]; } }) }, methods: { } } </script> <style> .map { width:750rpx; height:750rpx; } </style>
说明:刘宏缔的架构森林是一个专注架构的博客,
网站:https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-zai-di-tu-shang-ding-wei-zi-ji-de-wei-zhi-hbuilderx/
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
首先需要同意app使用位置权限
绿色的uniapp图标是当前位置