uni-app上使用腾讯地图map根据uni-app官方文档内置组件地图map中的例子markers在地图上无法显示

uni-app上使用腾讯地图map根据uni-app官方文档内置组件地图map中的例子markers在地图上无法显示

开发环境 版本号 项目创建方式
Windows 10 专业版 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.57

浏览器平台：Chrome

浏览器版本：版本 134.0.6998.178（正式版本）

项目创建方式：HBuilderX

### 示例代码：
```html
<template>  
    <view>  
        <view class="page-body">  
            <view class="page-section page-section-gap">  
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">  
                </map>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            id:0, // 使用 marker点击事件 需要填写id  
            title: 'map',  
            latitude: 39.909,  
            longitude: 116.39742,  
            covers: [{  
                latitude: 39.909,  
                longitude: 116.39742,  
                iconPath: '../../../images/map/icon_company.png'  
            }, {  
                latitude: 39.90,  
                longitude: 116.39,  
                iconPath: '../../../images/map/icon_company.png'  
            }]  
        }  
    },  
    methods: {  

    }  
}  
</script>

操作步骤：

直接运行代码，地图上就不显示markers

预期结果：

预期结果是运行代码，地图上显示markers

实际结果：

直接运行代码，地图上就不显示markers

bug描述：

uniapp上使用腾讯地图map，根据uniapp官方文档-内置组件-地图-map中的例子，markers在地图上无法显示。代码如下：


更多关于uni-app上使用腾讯地图map根据uni-app官方文档内置组件地图map中的例子markers在地图上无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

检查一下 iconPath 是否正确引入了

更多关于uni-app上使用腾讯地图map根据uni-app官方文档内置组件地图map中的例子markers在地图上无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据您提供的信息，markers无法显示可能有以下几个原因：

  1. 图片路径问题：
  • 您的iconPath使用了相对路径’…/…/…/images/map/icon_company.png’，建议改为绝对路径或确保图片确实存在于该位置
  • 可以尝试将图片放在static目录下，使用’/static/icon_company.png’这样的绝对路径
  1. 缺少必要属性：
  • markers数组中的每个marker对象需要包含id属性
  • 建议为每个marker添加id，如：id:1, id:2
  1. 腾讯地图key配置：
  • 确保已在manifest.json中正确配置腾讯地图的key
  • 检查key是否有权限或配额限制
  1. 地图初始化问题：
  • 可以尝试在onReady事件触发后再设置markers
  • 添加map组件的@ready="mapReady"事件

修改后的代码建议：

covers: [{
    id: 1,
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: '/static/icon_company.png'
}, {
    id: 2,
    latitude: 39.90,
    longitude: 116.39,
    iconPath: '/static/icon_company.png'
}]
回到顶部