uni-app map组件在cli项目中设置指南针、实时路况、poi、定位等功能后无效果

uni-app map组件在cli项目中设置指南针、实时路况、poi、定位等功能后无效果

示例代码：

{
  layout: 'default',
  style: { navigationBarTitleText: '轨迹' }
}

<template>
  <view>
    <map
      id="mapdiv"
      ref="map"
      :longitude="longitude"
      :latitude="latitude"
      :show-compass="true"
      :enable-traffic="true"
      :enable-poi="true"
      :show-location="true"
    ></map>
  </view>
</template>

<script lang="ts" setup>
const { safeAreaInsets } = uni.getSystemInfoSync()
const longitude = ref(0)
const latitude = ref(0)
const enAblePoi = ref<boolean>(true)
const map = ref<any>()
onLoad(() => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      console.log(res)
      longitude.value = res.longitude
      latitude.value = res.latitude
    },
    fail: (err) => {
      console.log(err)
    }
  })
})
</script>

<style lang="scss" scoped>
#mapdiv {
  width: 100vw;
  height: 100vh;
}
</style>

操作步骤：

{
  layout: 'default',
  style: { navigationBarTitleText: '轨迹' }
}

<template>
  <view>
    <map
      id="mapdiv"
      ref="map"
      longitude="longitude"
      latitude="latitude"
      show-compass="true"
      enable-traffic="true"
      enable-poi="true"
      show-location="true"
    ></map>
  </view>
</template>

<script lang="ts" setup>
const { safeAreaInsets } = uni.getSystemInfoSync()
const longitude = ref(0)
const latitude = ref(0)
const enAblePoi = ref<boolean>(true)
const map = ref<any>()
onLoad(() => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      console.log(res)
      longitude.value = res.longitude
      latitude.value = res.latitude
    },
    fail: (err) => {
      console.log(err)
    }
  })
})
</script>

<style lang="scss" scoped>
#mapdiv {
  width: 100vw;
  height: 100vh;
}
</style>

预期结果：

  • 出现定位图标，指南针等功能

实际结果：

  • 什么都没有出现

bug描述：

  • 在设置地图中等参数后，没有实际效果

更多关于uni-app map组件在cli项目中设置指南针、实时路况、poi、定位等功能后无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你提到的在安卓、离线打包里 map 的属性不生效，测试一下开发阶段标准基座是否正常，其他安卓手机、ios 手机是否正常，把排查结果说一下，缩小下问题范围

更多关于uni-app map组件在cli项目中设置指南针、实时路况、poi、定位等功能后无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的CLI项目中，如果你发现map组件设置了指南针、实时路况、POI（兴趣点）、定位等功能后无效果，可能是由于配置或代码实现上的错误。下面是一个基本示例，展示了如何正确配置这些功能。请确保你的uni-app项目已经正确安装并配置了相关依赖。

1. 确保在manifest.json中配置必要的权限

首先，你需要在manifest.json中配置必要的权限，比如定位权限：

"mp-weixin": {
  "appid": "your-app-id",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

2. map组件的基本配置

在你的页面中使用map组件，并配置相关属性：

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :show-location="true"
      :style="{ width: '100%', height: '300px' }"
      :markers="markers"
      :settings="settings"
      @tap="onMapTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      scale: 15,
      markers: [{
        id: 1,
        latitude: 39.915,
        longitude: 116.404,
        title: '北京'
      }],
      settings: {
        showCompass: true, // 显示指南针
        showTraffic: true, // 显示实时路况
        enablePoi: true // 显示POI
      }
    };
  },
  methods: {
    onMapTap(e) {
      console.log(e);
    }
  }
};
</script>

3. 检查并配置定位功能

确保在页面的onLoad或onReady生命周期中调用定位接口：

onLoad() {
  const that = this;
  uni.getLocation({
    type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
    success: function (res) {
      that.latitude = res.latitude;
      that.longitude = res.longitude;
      that.markers = [{
        id: 1,
        latitude: res.latitude,
        longitude: res.longitude,
        title: '当前位置'
      }];
    }
  });
}

4. 注意事项

  • 确保你的项目已经正确配置了相关权限，特别是在微信小程序等平台上。
  • map组件的settings属性中的showCompass、showTraffic和enablePoi必须设置为true。
  • 定位功能可能需要用户授权，因此在实际应用中应处理用户拒绝授权的情况。
  • 实时路况和POI的显示可能依赖于地图服务提供商的支持，确保你的API Key或SDK版本支持这些功能。

如果以上代码和配置无误，但功能仍然无效果，请检查你的控制台输出，查看是否有错误或警告信息，并根据提示进行相应的调整。

回到顶部