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图标是当前位置 

三,查看hbuilderx的版本: 

posted @ 2023-02-22 16:20  刘宏缔的架构森林  阅读(798)  评论(0编辑  收藏  举报