uniapp+高德API，能跑但地图不显示

Question

基于vue2的uniapp项目，使用高德api的时候。
跑起来不报错。
但就是没有图像。
以下是代码。

<template>
    <view class="mapcell">
        <map :latitude="latitude"  
        :longitude="longitude" 
        scale="18"  
        :markers="markers" 
        :show-location="true" 
        :controls="controls" 
        @controltap="refresh" >
        </map>
    </view>
</template>
<script>
 export default{
     data(){
         return{
             longitude:'22',
             latitude:'22',
         }
     },
     methods:{
         // 获取定位
         getlocation(){
             var that =this
             uni.getLocation({
                 type: 'gcj02',//国测局
                 geocode: 'true',
                 success: function (res) {
                     console.log('当前位置的经度：' + res.longitude);
                     console.log('当前位置的纬度：' + res.latitude);
                     console.log('当前位置：' + JSON.stringify(res));
                       
                     // 创建地图坐标对象
                     var point = new plus.maps.Point(res.longitude, res.latitude);
                     //静态方法，反向地理编码
                     plus.maps.Map.reverseGeocode(point, {},(event)=>{
                         var address = event.address; // 转换后的地理位置
                         that.locationaddress=address // 重新赋值
                     },function(e) {
                         console.log("失败回调",e);
                     });
                     // 赋值经纬度,从而得到当前位置
                     that.latitude=res.latitude
                     that.longitude=res.longitude 
         
                     // 地图上显示所在图标开始
                     let arr =[{
                         id:0,
                         longitude:res.longitude,
                         latitude:res.latitude,
                         name:"所在位置"
                     }]
                     let markers = []
                     for (var i=0;i<arr.length;i++){
                         markers=markers.concat({
                         id:arr[i].id,
                         latitude: arr[i].latitude,//纬度
                         longitude: arr[i].longitude,//经度
                         callout:{//自定义标记点上方的气泡窗口 点击有效
                             content:arr[i].name,//文本
                             color:'#ffffff',//文字颜色
                             fontSize:18,//文本大小
                             borderRadius:8,//边框圆角
                             bgColor:'#00c16f',//背景颜色
                             display:'ALWAYS',//常显
                         },
                         iconPath:'../../../static/loca.png',
                         width:24,
                         height:24
                     })
                 }
                 that.markers=markers; // markers就是地图选点一样的功能,显示小坐标
                 // 地图上显示所在图标结束
                 that.controls=[{
                     id:0,
                     position:{//控件在地图的位置
                         left:15,
                         top:15,
                         width:24,
                         height:24
                     },
                     iconPath:'../../../static/refresh_map.png'
                 }]
             },
             // 定位失败
             fail: function (err) {
                 uni.showToast({
                     title: err,
                     icon:'none'
                     });
                 }
             })
         },
         // 点击刷新方法
         refresh(e){
             this.getlocation();
         },
     }
 }

</script>
<style lang="scss" scoped>
    .mapcell{
        width 100%
        height 440rpx
        margin-bottom 30rpx
        padding 0  24rpx
        map{
            width:100%;
            height:100%;
        }
    }

.map-body {
    width: 100vw;
    height: 100vh;
    position: relative;
    .map {
        width: 100%;
        height: calc(100% - 110rpx);
    }
    .btn {
        height: 110rpx;
    }
}
</style>

Answer 1

如果你使用了niapp和高德API，但地图无法显示，可能是因为以下原因：

1. API Key错误或过期：请确保你的高德API Key是正确的，并且没有过期。你可以在高德开发者平台上申请一个新的API Key来解决这个问题。

2. 地图容器大小设置错误：请确认你的地图容器大小是正确的。如果地图容器太小，地图会被压缩或隐藏。

3. CSS样式冲突：请检查你的网页中是否有与地图相关的CSS样式冲突。例如，某些CSS样式可能会更改地图的大小或位置。

如果你确认以上问题都没有出现，你可以检查你的代码是否有错误。你可以使用浏览器的开发者工具来检查是否存在JavaScript错误，并查看控制台输出来确定错误原因和解决方案。