测试没有复现问题,请提供测试代码
<template>
<view class="content">
<map class="map" id="map1" 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" @tap="maptap" @controltap="oncontroltap"
@markertap="onmarkertap" @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
<div class="test">{{info}}</div>
<scroll-view class="scrollview" scroll-y="true">
<!-- <view class="list-item">
<text class="list-text">显示3D楼块</text>
<switch :checked="enable3D" @change="enableThreeD" />
</view>
<view class="list-item">
<text class="list-text">显示指南针</text>
<switch :checked="showCompass" @change="changeShowCompass" />
</view>
<view class="list-item">
<text class="list-text">开启俯视</text>
<switch :checked="enableOverlooking" @change="changeEnableOverlooking" />
</view>
<view class="list-item">
<text class="list-text">是否支持缩放</text>
<switch :checked="enableZoom" @change="changeEnableZoom" />
</view>
<view class="list-item">
<text class="list-text">是否支持拖动</text>
<switch :checked="enableScroll" @change="changeEnableScroll" />
</view>
<view class="list-item">
<text class="list-text">是否支持旋转</text>
<switch :checked="enableRotate" @change="changeEnableRotate" />
</view>
<view class="list-item">
<text class="list-text">是否开启卫星图</text>
<switch :checked="enableSatellite" @change="changeEnableSatellite" />
</view>
<view class="list-item">
<text class="list-text">是否开启实时路况</text>
<switch :checked="enableTraffic" @change="changeEnableTraffic" />
</view> -->
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="changeRotate">changeRotate</button>
<button class="button" @click="changeSkew">skew</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="clearMarkers">clearMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="clearPolyline">clearPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<button class="button" @click="clearPolygons">clearPolygons</button>
<button class="button" @click="addCircles">addCircles</button>
<button class="button" @click="includePoint">includePoints</button>
<button class="button" @click="getCenterLocation">getCenterLocation</button>
<button class="button" @click="getRegion">getRegion</button>
<button class="button" @click="translateMarker">translateMarker</button>
</scroll-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: 15000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: '#CC0000'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 12000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: '#FFCCFF'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 9000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
module.exports = {
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: false,
scale: 11,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [],
markers: [],
polygons: [],
circles: [],
includePoints: [],
rotate: 0,
skew: 0,
info: ''
}
},
onLoad() {},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
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.detail.value;
},
changeShowCompass(e) {
this.showCompass = e.detail.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.detail.value;
},
changeEnableZoom(e) {
this.enableZoom = e.detail.value;
},
changeEnableScroll(e) {
this.enableScroll = e.detail.value;
},
changeEnableRotate(e) {
this.enableRotate = e.detail.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.detail.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.detail.value;
},
addMarkers() {
this.markers = testMarkers;
},
clearMarkers() {
this.markers = [];
},
addPolyline() {
this.polyline = testPolyline;
},
clearPolyline() {
this.polyline = [];
console.log(this.polyline);
},
addPolygons() {
this.polygons = testPolygons;
},
clearPolygons() {
this.polygons = [];
console.log(this.polygons.length);
},
addCircles() {
this.circles = testCircles;
},
includePoint() {
this.includePoints = testIncludePoints;
},
getCenterLocation() {
this.map.getCenterLocation({
success: ret => {
console.log(JSON.stringify(ret));
uni.showModal({
content: JSON.stringify(ret)
})
}
})
},
getRegion() {
this.map.getRegion({
success: ret => {
console.log(JSON.stringify(ret));
uni.showModal({
content: JSON.stringify(ret)
})
}
})
},
translateMarker() {
this.map.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
animationEnd: (e) => {
console.log(e);
}
});
},
maptap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onmarkertap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncontroltap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onupdated(e) {
console.log(JSON.stringify(e))
},
onregionchange(e) {
this.info = JSON.stringify(e)
console.log(JSON.stringify(e));
},
onpoitap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
.content {
flex: 1;
;
}
.map {
width: 750rpx;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
3 个回复
1***@qq.com
遇到同样的问题,官方可以出来解决一下么
DCloud_uni-ad_HDX
测试没有复现问题,请提供测试代码
W***@126.com
地图上的方法 在APP 上使用问题很多,望官方 解决一下。
2020-11-06 16:35
[已删除]
承接前端H5、小程序、APP、PC端网站等外包,主要技术栈为vue、uni-app,有意请加微信:13070273424(我是前端。1. 我找有单子的服务端合作人。2. 整个项目外包给我,我这也有个小团队。3. 兼职,公司/团队偶尔丢点小项目或者页面调整等)