<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>
![8***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/78134f5dce0517a1451f913967a69518.png)
- 发布:2022-09-02 11:43
- 更新:2022-09-02 13:33
- 阅读:239
【已解决】官方"地图"API与组件map 所有平台差异说明或最低版本中有标注app-nvue相关的 api调用都无效 小程序正常,但在app与h5无效
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
浏览器平台: Chrome
浏览器版本: 104.0.5112.102(正式版本) (64 位)
项目创建方式: HBuilderX
示例代码:
操作步骤:
贴以上代码
贴以上代码
预期结果:
app 运行正常 ,小程序 运行正常 ,h5 运行正常
app 运行正常 ,小程序 运行正常 ,h5 运行正常
实际结果:
app api无效 ,小程序 运行正常 ,h5 api无效
app api无效 ,小程序 运行正常 ,h5 api无效
羞耻疯
我也出现了这个问题,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