<template>
<view>
<view class="map">
<map id="map" ref="map" style="width: 750rpx;height: 500rpx;"
:latitude="latitude" :longitude="longitude" :show-location="true" :circles="circlesList" enable-rotate enable-overlooking enable-poi>
</map>
</view>
</view>
</template>
<script setup lang="ts">
import {ref, reactive, getCurrentInstance} from 'vue'
import { onReady } from '@dcloudio/uni-app'
const latitude = ref('31.301508')
const longitude = ref('121.521276')
const mapContext = ref()
const img = '/static/logo.png'
// 范围
const circlesList = reactive([])
onReady(()=>{
mapContext.value = uni.createMapContext("map", getCurrentInstance())
// 获取定位 h5需要 https app需要申请配置高德key
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) {
latitude.value = res.latitude;
longitude.value = res.longitude;
mapContext.value.moveToLocation({
latitude: latitude.value,
longitude: longitude.value
})
circlesList.push({
latitude: latitude.value,
longitude: longitude.value,
color: '#AACAF6AA', // 描边颜色
fillColor: '#AACAF6AA', //填充颜色
radius: 1000, //半径
})
}
})
// 仅调用初始化，才会触发 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);
})
})
</script>
8***@qq.com
- 发布：2022-09-05 13:22
- 更新：2022-09-05 15:09
- 阅读：280
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win7
HBuilderX类型： 正式
HBuilderX版本号： 3.5.3
手机系统： Android
手机系统版本号： Android 7.1.1
手机厂商： vivo
手机机型： vivox9
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
circlesList.push({
latitude: latitude.value,
longitude: longitude.value,
color: '#AACAF6AA', // 描边颜色
fillColor: '#AACAF6AA', //填充颜色
radius: 1000, //半径
})
circlesList.push({
latitude: latitude.value,
longitude: longitude.value,
color: '#AACAF6AA', // 描边颜色
fillColor: '#AACAF6AA', //填充颜色
radius: 1000, //半径
}) 预期结果：
circles赋值后地图出现圆圈
circles赋值后地图出现圆圈
实际结果：
地图无圆圈
地图无圆圈
bug描述：
circlesList 初始设置有画出圆，但是我需要将地图中心点定为当前位置，需要在当前位置画圈，但后赋值的值，地图并无画出圆
bug 已复现，目前你可以用这两种方式暂时实现：
- 使用计算属性：
<template>
<view>
<view class="map">
<map id="map" ref="map" style="width: 750rpx;height: 500rpx;" :latitude="latitude" :longitude="longitude"
:show-location="true" :circles="circles" enable-rotate enable-overlooking enable-poi>
</map>
</view>
</view>
</template>
export default {
data() {
return {
circlesList: []
}
},
computed: {
circles() {
return this.circlesList.slice(0);
}
},
onReady() {
const mapContext = uni.createMapContext("map", this)
uni.getLocation({
type: 'gcj02',
success: (res) => {
mapContext.moveToLocation({
latitude: res.latitude,
longitude: res.longitude
})
this.circlesList.push({
latitude: res.latitude,
longitude: res.longitude,
color: 'red',
fillColor: 'red',
radius: 1000
})
}
})
}
}
- 直接重新赋值，不使用 push
Suty
iOS上谷歌地图不行,https://ask.dcloud.net.cn/question/192373
2024-06-24 15:47