注册 登录
5***@qq.com
5***@qq.com
  • 发布：2021-12-17 14:42
  • 更新：2022-03-24 16:30
  • 阅读：558

【报Bug】高德地图polygons只在nvue页面中支持吗 为啥vue页面中polygons画多边形不显示

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： MacBook Pro (13-inch, M1, 2020)

HBuilderX类型： 正式

HBuilderX版本号： 3.2.15

手机系统： iOS

手机系统版本号： iOS 14

手机厂商： 苹果

手机机型： iphone12

页面类型： vue

vue版本： vue2

打包方式： 云端

项目创建方式： HBuilderX

示例代码：

高德地图polygons只在nvue页面中支持吗 为啥vue页面中polygons画多边形不显示

操作步骤：
<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>

</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,  
    }  
];  
export default {  
    components: {  

    },  
    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: 13,  
            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  
        }  
    },  
    created() {  
        // this.circles=testCircles  
        this.polygons=testPolygons  
        console.log('polygons:'+JSON.stringify(testPolygons))  
    },  
    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.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: 750rpx;  
    background-color: #f0f0f0;  
}  

.line {  
    height: 4px;  
}  

.scrollview {  
    flex: 1;  
}

</style>

预期结果：
<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>

</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,  
    }  
];  
export default {  
    components: {  

    },  
    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: 13,  
            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  
        }  
    },  
    created() {  
        // this.circles=testCircles  
        this.polygons=testPolygons  
        console.log('polygons:'+JSON.stringify(testPolygons))  
    },  
    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.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: 750rpx;  
    background-color: #f0f0f0;  
}  

.line {  
    height: 4px;  
}  

.scrollview {  
    flex: 1;  
}

</style>

实际结果：
<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>

</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,  
    }  
];  
export default {  
    components: {  

    },  
    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: 13,  
            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  
        }  
    },  
    created() {  
        // this.circles=testCircles  
        this.polygons=testPolygons  
        console.log('polygons:'+JSON.stringify(testPolygons))  
    },  
    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.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: 750rpx;  
    background-color: #f0f0f0;  
}  

.line {  
    height: 4px;  
}  

.scrollview {  
    flex: 1;  
}

</style>

bug描述：

高德地图polygons只在nvue页面中支持吗 为啥vue页面中polygons画多边形不显示

2021-12-17 14:42 负责人:DCloud_uni-ad_HDX 分享

没有找到相关结果

    已邀请:
    DCloud_uni-ad_HDX

    DCloud_uni-ad_HDX

    vue 暂不支持，后续会支持

    2021-12-17 17:54 分享

    • 5***@qq.com (作者)

      好的，大概什么时候支持呢

      2021-12-18 10:58

    评论 取消
    DCloud_uni-ad_HDX

    DCloud_uni-ad_HDX

    预计 3.4.3 alpha 支持

    2022-03-24 16:30 分享
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报