1***@qq.com
1***@qq.com
  • 发布:2020-06-02 16:09
  • 更新:2020-06-02 16:52
  • 阅读:831

在nvue中mapContext中的所有方法都不生效

分类:nvue
2020-06-02 16:09 负责人:DCloud_uni-ad_HDX 分享
已邀请:
DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

对比下你的逻辑

<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

该问题目前已经被锁定, 无法添加新回复