<template>
<view>
<view class="map">
<map id="map" ref="map" style="width: 750rpx;height: 500rpx;" :scale="14" :latitude="latitude" :longitude="longitude" :show-location="true" :circles="circleComputed" enable-rotate enable-overlooking enable-poi></map>
</view>
<view class="map-down-box">
<uni-section title="查询位置" titleFontSize="15px">
<view class="fake-seat" @click="searchSeat">
<uni-icons type="search" color="gray"></uni-icons>
<text style="font-size:13px;color:gray;margin-left:5px">搜索位置</text>
</view>
</uni-section>
<uni-section title="分析范围(m)" titleFontSize="15px">
<slider :value="mapRadius" @change="sliderChange" :min="500" :max="5000" :step="500" show-value/>
</uni-section>
</view>
</view>
</template>
<script setup lang="ts">
import {ref, reactive, getCurrentInstance, computed} from 'vue'
import { onReady } from '@dcloudio/uni-app'
const latitude = ref(31.301508)
const longitude = ref(121.521276)
const mapContext = ref()
const mapRadius = ref(500)
interface circlesParam {
latitude: number,
longitude: number,
color: string,
fillColor: string,
radius: number
}
const circlesList = reactive<circlesParam[]>([])
// 用于监测circle变化 触发地图圆圈显示
const circleComputed = computed(() => {
return circlesList.slice(0)
})
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;
changeLocation()
}
})
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
mapContext.value.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60
})
})
// 搜索位置
const searchSeat = ()=>{
console.log('1111111111111111')
uni.chooseLocation({
success: (res) => {
console.log('搜索地址经度:' + res.longitude)
console.log('搜索地址纬度:' + res.latitude)
console.log('搜索地址:' + res.address)
latitude.value = res.latitude
longitude.value = res.longitude
changeLocation()
}
})
}
const changeLocation = () =>{
mapContext.value.moveToLocation({
latitude: latitude.value,
longitude: longitude.value
})
circlesList[0] = {
latitude: latitude.value,
longitude: longitude.value,
color: '#AACAF6AA', // 描边颜色
fillColor: '#AACAF6AA', //填充颜色
radius: mapRadius.value, //半径
}
}
</script>
<style scoped>
.fake-seat{
background: #f5f5f5;
border-radius: 15rpx;
margin: 0 30rpx;
padding: 20rpx;
flex-direction: row;
align-items: center;
}
</style>
- 发布:2022-09-06 09:16
- 更新:2022-12-05 14:41
- 阅读:445
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
手机系统: Android
手机系统版本号: Android 7.1.1
手机厂商: vivo
手机机型: vivox9
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
<slider :value="mapRadius" @change="sliderChange" :min="500" :max="5000" :step="500" show-value/>
<slider :value="mapRadius" @change="sliderChange" :min="500" :max="5000" :step="500" show-value/>
预期结果:
正常组件效果
正常组件效果
实际结果:
step无效果 showvalue非正常整数值
step无效果 showvalue非正常整数值
bug描述:
slider组件 真机运行 step没效果 而且会有很多小数点