uni-app编译成app后使用高德地图时如何获取缩放比例

uni-app编译成app后使用高德地图时如何获取缩放比例

显示和小marks都显示没有问题,就是拿不到缩放的比例的问题,倒是缩放有触发但是也仅限于触发没有返回我想要的数据

<template>  
    <view style="" class="mapBox">  
        <map id="mapBoday" style="width: 100%; height: 100%; z-index: 1;position: absolute;" :scale="scale"  
            :show-compass="showCompass" :latitude="latitude" :longitude="longitude" @markertap="onMarkerTap"  
            :markers="markers" @click="getclick" @updated="onMapFinish" min-scale="1" max-scale="20"  
            @regionchange="onRegionChange">  
        </map>  

    </view>  
</template>  

<script setup>  
    import {  
        ref,  
        onMounted  
    } from 'vue'  

    // 定义经纬度状态  
    const latitude = ref(28.009883);  
    const longitude = ref(111.126059);  
    const markers = ref([]); //地图的地址  
    const showCompass = ref(true)  

    const mapPlan = ref(true)  

    const address = ref('')  
    const scale = ref(10)  

    const getclick = (e) => {  
        console.log(e)  
    }  
    const onMapFinish = (e) => {  
        console.log("更新事件", e)  
    }  

    const onRegionChange = (event) => {  
        // 监听地图缩放,获取当前缩放级别  
        console.log("监听到缩放", event, event.detail)  
        let mapContext = uni.createMapContext("mapBoday");  
        mapContext.getScale({  
            success(res) {  
                console.log('当前缩放级别:', res.scale);  
                scale.value = res.scale;  
            },  
            fail(err) {  
                console.error("获取缩放级别失败:", err);  
            }  
        });  

        if (event.type === 'end') {  
            console.log('当前缩放级别:', event.detail.scale);  
            // scale.value = event.detail.scale;  
        }  
    };  

    // 获取当前位置信息  
    const getLocation = () => {  
        uni.getLocation({  
            type: 'gcj02', // 使用 gcj02 坐标系  

            success: (res) => {  
                // latitude.value = res.latitude;  
                // longitude.value = res.longitude;  

                address.value = res.address;  

                // 设置标记(marker)  
                markers.value = [{  
                        id: 1,  
                        latitude: res.latitude,  
                        longitude: res.longitude,  
                        iconPath: '../../static/icon/location.png', // 可自定义图标路径  
                        width: 10,  
                        height: 10  
                    },  
                    {  
                        id: 2,  
                        latitude: 28.009883, // 标记的经度  
                        longitude: 111.126059, // 标记的纬度  
                        iconPath: '../../static/icon/destination.png', // 自定义图标  
                        width: 10,  
                        height: 10,  
                        callout: {  
                            content: '点击导航到这里',  
                            color: '#000',  
                            fontSize: 12,  
                            borderRadius: 5,  
                            bgColor: '#fff',  
                            padding: 5,  
                            display: 'ALWAYS'  
                        }  
                    }  
                ];  
            },  
            fail: (err) => {  
                console.log('获取定位失败:', err);  
            }  
        });  
    };  

    // 点击标记时的处理函数  
    const onMarkerTap = (event) => {  
        const markerId = event.id;  
        const selectedMarker = markers.value.find(marker => marker.id === markerId);  

        console.log(event, markerId, selectedMarker)  
        if (selectedMarker) {  
            // 打开高德地图进行导航  
            uni.openLocation({  
                latitude: selectedMarker.latitude,  
                longitude: selectedMarker.longitude,  
                name: '导航目的地', // 可选,显示在高德地图上的目的地名称  
                address: '这里是目的地地址', // 可选,显示在高德地图上的详细地址  
                success() {  
                    console.log('导航成功');  
                },  
                fail(err) {  
                    console.error('导航失败:', err);  
                }  
            });  
        }  
    };  

    //切换视图  
    const openMapPlan = () => {  

    }  

    // 组件挂载时获取地理位置  
    onMounted(() => {  
        getLocation();  
        let mapContext = uni.createMapContext("mapBoday", this);  
        mapContext.getScale({  
            success(res) {  
                console.log("初始化缩放级别:", res.scale);  
                scale.value = res.scale;  
            }  
        });  
    });  
</script>  

<style lang="scss" scoped>  
    .mapBox {  
        height: 100%;  
        width: 100%;  
    }  
</style>
{
    "defaultPrevented": false,  
    "timeStamp": 0,  
    "_stop": false,  
    "_end": false,  
    "type": "onRegionchange",  
    "bubbles": false,  
    "cancelable": false,  
    "target": {  
        "dataset": {  
            "v05504d77": "",  
            "v-05504d77": ""  
        },  
        "id": "mapBoday",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    },  
    "detail": {},  
    "currentTarget": {  
        "dataset": {  
            "v05504d77": "",  
            "v-05504d77": ""  
        },  
        "id": "mapBoday",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    }  
}

更多关于uni-app编译成app后使用高德地图时如何获取缩放比例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

简化一下问题,是问 regionchange 的回调结果里没有那个字段吗?

更多关于uni-app编译成app后使用高德地图时如何获取缩放比例的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的已经解决了

可以看看我的博客我解决方案是这样的: 直达地址

是 let mapContext = uni.createMapContext(“mapBoday”, this); 这里有错误?

麻烦问一下是如何解决的

在uni-app项目中,编译成App后使用高德地图(AMap)时,获取地图的缩放比例(Zoom Level)通常涉及到高德地图的JavaScript API。以下是一个示例,展示如何在uni-app中集成高德地图并获取其缩放比例。

首先,确保你已经在高德开放平台申请了Key,并在uni-app的manifest.json中配置了相关权限(如访问网络权限)。

1. 安装高德地图SDK(如果适用)

对于原生App,可能需要安装高德地图的原生SDK,但uni-app主要使用Webview容器,因此通常使用高德地图的Web服务API。

2. 在页面中引入高德地图JS API

在你的uni-app页面(如pages/index/index.vue)中,引入高德地图的JavaScript API:

<template>
  <view>
    <div id="mapContainer" style="width: 100%; height: 500px;"></div>
    <button @click="getZoom">获取缩放比例</button>
  </view>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const self = this;
      window.initAMapApiLoader({
        key: 'YOUR_AMAP_KEY', // 替换为你的高德地图Key
        version: '2.0',
        plugins: []
      });
      window.AMapApiLoader.load({
        plugins: [], // 需要使用的插件列表,注意:这里不需要加载任何插件
        success: function() {
          const map = new window.AMap.Map('mapContainer', {
            resizeEnable: true,
            zoom: 10, // 初始化地图级别
            center: [116.397428, 39.90923] // 初始化地图中心点
          });
          self.map = map; // 保存地图实例
        },
        fail: function(e) {
          console.log(e);
        }
      });
    },
    getZoom() {
      if (this.map) {
        const zoom = this.map.getZoom();
        console.log('当前缩放比例:', zoom);
        uni.showToast({
          title: `当前缩放比例: ${zoom}`,
          icon: 'none'
        });
      }
    }
  }
};
</script>

3. 运行项目

确保你的uni-app项目配置正确,然后运行项目并编译为App。在App中打开对应的页面,你应该能看到高德地图,并且点击按钮后能在控制台和页面上看到当前的缩放比例。

注意事项

  • 确保你的高德地图Key有效且没有超出使用限制。
  • 在实际项目中,可能需要根据需求调整地图的初始化参数和样式。
  • 如果遇到跨域问题,可能需要配置服务器端的CORS。

以上代码展示了如何在uni-app中集成高德地图并获取其缩放比例,希望对你有所帮助。

回到顶部