1***@qq.com
- 发布:2020-06-02 16:09
- 更新:2020-06-02 16:52
- 阅读:831
在nvue中mapContext中的所有方法都不生效
分类:nvue
对比下你的逻辑
<template>
<view>
<map id="map1" class="map" v-if="isShowMap" :latitude="latitude" :longitude="longitude" :scale="scale" :controls="controls"
:markers="markers" @controltap="controltap" :show-location="true"></map>
<button @click="showMap">showMap</button>
<button @click="updateCenter">updateCenter</button>
<button @click="moveToLocation">moveToLocation</button>
<button @click="updateMarker">updateMarker</button>
<button @click="getScale">getScale</button>
<button @click="getCenterLocation">getCenterLocation</button>
<button @click="getRegion">getRegion</button>
</view>
</template>
<script>
export default {
data() {
return {
isShowMap: true,
latitude: 31.226487,
longitude: 121.430394,
scale: 20,
markers: [],
controls: [{
id: 1,
position: {
left: 15,
top: 15
},
iconPath: '/static/logo.png',
clickable: true
}]
}
},
onReady() {
this.mapContext = uni.createMapContext('map1', this);
},
methods: {
showMap() {
this.isShowMap = !this.isShowMap;
},
controltap(e) {
console.log(e.detail.id);
},
updateCenter(e) {
this.latitude = "39.909";
this.longitude = "116.39742";
},
moveToLocation() {
this.mapContext.moveToLocation({
latitude: 39.909,
longitude: 116.39742,
success: (res) => {
console.log(res);
}
});
},
getCenterLocation() {
this.mapContext.getCenterLocation({
success: (res) => {
console.log(res.longitude);
console.log(res.latitude);
}
})
},
getScale() {
this.mapContext.getScale({
success: (res) => {
console.log(res.scale);
}
})
},
getRegion() {
this.mapContext.getRegion({
success: (res) => {
console.log(res.southwest);
console.log(res.northeast);
}
})
},
updateMarker() {
this.markers = [{
id: 100,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
rotate: 130,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
label: {
content: 'xxxxxxxxxxx'
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 200,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '/static/logo.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'
}
}
]
}
}
}
</script>
<style>
.map {
width: 750rpx;
height: 400px;
}
</style>
谭小谭
把nvue作为子组件或者subNue,方法就不生效了,当成主页面跳转才生效,是为什么
2021-04-25 21:03
谭小谭
回复 谭小谭: 求解答,很着急啊
2021-04-25 21:03