<template>
<view class="content">
<map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" :latitude="location.latitude"
:show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass"
:enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll"
:enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :markers="markers"
:polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"></map>
<view class="line"></view>
<uni-list class="scrollview">
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enable3D" title="显示3D楼块" @switchChange="enableThreeD" />
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="showCompass" title="显示指南针" @switchChange="changeShowCompass" />
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableOverlooking" title="开启俯视" @switchChange="changeEnableOverlooking" /> -->
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableZoom" title="是否支持缩放" @switchChange="changeEnableZoom" /> -->
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableScroll" title="是否支持拖动" @switchChange="changeEnableScroll" /> -->
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableRotate" title="是否支持旋转" @switchChange="changeEnableRotate" /> -->
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableSatellite" title="是否开启卫星图" @switchChange="changeEnableSatellite" /> -->
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableTraffic" title="是否开启实时路况" @switchChange="changeEnableTraffic" /> -->
</uni-list>
<view :show-arrow="true" title="是否" @click="setCircle(0,'showCircle1')" >展示圆1</view>
<view :show-arrow="true" title="是否展示圆2" @click="setCircle(1,'showCircle2')" >展示圆2</view>
</view>
</template>
<script>
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '/static/location.png',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
}
}
];
const testPolyline = [{
points: [{
latitude: 39.925539,
longitude: 116.279037
},
{
latitude: 39.925539,
longitude: 116.520285
}
],
color: '#FFCCFF',
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
borderWidth: 2
},
{
points: [{
latitude: 39.938698,
longitude: 116.275177
},
{
latitude: 39.966069,
longitude: 116.289253
},
{
latitude: 39.944226,
longitude: 116.306076
},
{
latitude: 39.966069,
longitude: 116.322899
},
{
latitude: 39.938698,
longitude: 116.336975
}
],
color: '#CCFFFF',
width: 5,
dottedLine: true,
arrowLine: true,
borderColor: '#CC0000',
borderWidth: 3
}
];
const testPolygons = [{
points: [{
latitude: 39.781892,
longitude: 116.293413
},
{
latitude: 39.787600,
longitude: 116.391842
},
{
latitude: 39.733187,
longitude: 116.417932
},
{
latitude: 39.704653,
longitude: 116.338255
}
],
fillColor: '#FFCCFF',
strokeWidth: 3,
strokeColor: '#CC99CC',
zIndex: 11
},
{
points: [{
latitude: 39.887600,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.428932
},
{
latitude: 39.887600,
longitude: 116.428932
}
],
fillColor: '#CCFFFF',
strokeWidth: 5,
strokeColor: '#CC0000',
zIndex: 3
}
];
const testCircles = [{
latitude: 39.996441,
longitude: 116.411146,
radius: 2000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: 'rgba(235,10,30,0.13)'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 2000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: 'rgba(235,10,30,0.13)'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 2000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
export default {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '/static/logo.png',
clickable: true
}],
showLocation: true,
scale: 12,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
showCircle1:false,
showCircle2:false,
polyline: [],
markers: [],
polygons: [],
circles:[],
includePoints: [],
rotate: 0,
skew: 0
}
},
onLoad() {
},
methods: {
setCircle(index,key){
console.log('setCircle',index)
this[key] = !this[key];
const item = testCircles[index];
this.circles = [item];
console.log('this.$refs.map1',this.$refs.map1)
this.$refs.map1?.moveToLocation({
longitude:item.longitude,
latitude:item.latitude
})
},
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
changeRotate() {
this.rotate = this.rotate == 90 ? 0 : 90;
},
changeSkew() {
this.skew = this.skew == 30 ? 0 : 30;
},
enableThreeD(e) {
this.enable3D = e.value;
},
changeShowCompass(e) {
this.showCompass = e.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.value;
},
changeEnableZoom(e) {
this.enableZoom = e.value;
},
changeEnableScroll(e) {
this.enableScroll = e.value;
},
changeEnableRotate(e) {
this.enableRotate = e.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.value;
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
width: 750rpx;
height: 250px;
background-color: #f0f0f0;
}
.line {
height: 4px;
}
.scrollview {
flex: 1;
}
</style>
- 发布:2024-06-02 16:40
- 更新:2024-06-14 11:07
- 阅读:191
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 14.2.1 (23C71)
HBuilderX类型: Alpha
HBuilderX版本号: 4.15
手机系统: iOS
手机系统版本号: iOS 17
手机厂商: 模拟器
手机机型: iPhone 15
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
circle更新之后,圆也只展示当前配置的
circle更新之后,圆也只展示当前配置的
实际结果:
之前的圆没有清除还在原地,然后新配置的圆也展示了
之前的圆没有清除还在原地,然后新配置的圆也展示了
bug描述:
nvue使用Google地图,更新circles之后,先前打的circles依然存在未清除掉。可以用hbuilder的创建的hello uni-app模版复现
3 个回复
Suty
@DCloud_HB_WJ @DCloud_Android_MHF @DCloud_iOS_LZY 这个bug请快修复
Suty
@zhengyu 最后你怎么处理业务的呢?
zhengyu (作者)
现在就是处理不了业务啊
2024-06-27 11:43
zhengyu (作者)
https://juejin.cn/post/7426914011558969370,我用自定义图层代替圆解决了
2024-10-19 21:54
Suty
需要填写谷歌key, 代码案例能够复现bug、