8***@qq.com
8***@qq.com
  • 发布:2022-09-02 11:43
  • 更新:2022-09-02 13:33
  • 阅读:239

【已解决】官方"地图"API与组件map 所有平台差异说明或最低版本中有标注app-nvue相关的 api调用都无效 小程序正常,但在app与h5无效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

浏览器平台: Chrome

浏览器版本: 104.0.5112.102(正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="index-page">  
    <view class="map-content">  
      <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>  
    </view>  
 </view>  
</template>  

<script setup lang="ts">  
import { getCurrentInstance, reactive, ref } from 'vue'  
import { onReady } from '@dcloudio/uni-app'  

const latitude = ref('23.099994')  
const longitude = ref('113.324520')  
const mapContext = ref()  

uni.getLocation({  
      success: res => {  
        console.log(res);  
         console.log(1111);  
      }  
    })  

onReady( () => {  

    mapContext.value = uni.createMapContext("map", getCurrentInstance())  

      mapContext.value.getCenterLocation({  
          success: (res)=>{  
            console.log(res);  
          },  
          fail: (err)=>{  
            console.log('错误信息:' + err);  
          }  
      })  

      mapContext.value.moveToLocation({  
        longitude: 113,  
        latitude: 23,  
        success: (res)=>{  
          console.log(res);  
        }  
      })  

      // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})  
      mapContext.value.initMarkerCluster({  
        enableDefaultStyle: false,  
        zoomOnClick: true,  
        gridSize: 60,  
        complete(res) {  
          console.log('initMarkerCluster', res)  
        }  
      })  

      mapContext.value.on("markerClusterCreate", (e) => {  
        console.log("markerClusterCreate", e);  
      })  

      addMarkers()  

})  

const addMarkers = ()=>{  
  const marker = {  
          id: 1,  
          iconPath: img,  
          width: 50,  
          height: 50,  
          joinCluster: true, // 指定了该参数才会参与聚合  
          label: {  
            width: 50,  
            height: 30,  
            borderWidth: 1,  
            borderRadius: 10,  
            bgColor: '#ffffff'  
          }  
        };  

        const positions = [{  
          latitude: 23.099994,  
          longitude: 113.324520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.322520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.326520,  
        }, {  
          latitude: 23.096994,  
          longitude: 113.329520,  
        }]  

        const markers = []  

        positions.forEach((p, i) => {  
          const newMarker = Object.assign({},marker, p)  
          newMarker.id = i + 1  
          newMarker.label.content = `label ${i + 1}`  
          markers.push(newMarker)  
        })  
        mapContext.value.addMarkers({  
            markers,  
            clear: false,  
            complete(res) {  
              console.log('addMarkers', res)  
            }  
        })  
}  

</script>  

<style scoped  lang="less">  
.index-page {  
  .map-content{  
    width: 100%;  
    flex: 1;  
    height: 300rpx;  
    .map {  
      width: 100%;  
      flex: 1;  
      height: 100%;  
    }  
   }  
  }  
</style>

操作步骤:

贴以上代码

预期结果:

app 运行正常 ,小程序 运行正常 ,h5 运行正常

实际结果:

app api无效 ,小程序 运行正常 ,h5 api无效

bug描述:

官方"地图"API与组件map 所有平台差异说明或最低版本中有标注app-nvue相关的 api调用都无效

小程序正常,但在app与h5无效

2022-09-02 11:43 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

这些api未注明H5,所以说明H5端不支持
App nvue需要文件为.nvue文件,这边测试nvue3运行到安卓真机没有问题

  • 羞耻疯

    我也出现了这个问题,vue2,在小程序端正常,app uni.createMapContext(this.mapId, this)出现了一个Property or method "toJSON" is not defined on the instance but referenced during render的错误,代码写在一个.nvue文件的组件里,hbuilderx3.6.4

    2022-10-10 18:30

  • DCloud_UNI_WZF

    回复 羞耻疯: 开新帖反馈,参考提交Bug模板提供详细信息及可复现demo,谢谢

    2022-10-10 19:55

  • 羞耻疯

    回复 DCloud_UNI_WZF: 开啦

    2022-10-11 08:38

该问题目前已经被锁定, 无法添加新回复