uni-app 高德地图polygons是否只在nvue页面中支持 vue页面中polygons画多边形不显示

开发环境信息

类别	信息
产品分类	uniapp/App
PC操作系统	Mac
PC操作系统版本	MacBook Pro (13-inch, M1, 2020)
HBuilderX类型	正式
HBuilderX版本	3.2.15
手机系统	iOS
手机系统版本	iOS 14
手机厂商	苹果
手机机型	iPhone12
页面类型	vue
Vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<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>

更多关于uni-app 高德地图polygons是否只在nvue页面中支持 vue页面中polygons画多边形不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼

vue 暂不支持，后续会支持

更多关于uni-app 高德地图polygons是否只在nvue页面中支持 vue页面中polygons画多边形不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

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

yibo5220 3楼

预计 3.4.3 alpha 支持

yibo5220 4楼

根据你的代码和问题描述，polygons在vue页面中不显示的主要原因是代码中存在几个关键问题：

polyline属性绑定错误：你的代码中polyline="polyline"没有使用v-bind绑定，这会导致polyline属性被当作字符串处理而不是响应式数据。
polygons数据格式问题：虽然你的testPolygons数据格式基本正确，但需要确保points数组中的坐标点数量至少为3个才能形成多边形。
地图显示范围问题：你的polygons坐标点可能超出了当前地图的显示范围。建议添加include-points属性来确保地图显示包含所有多边形点。

修正建议：

<!-- 修正polyline绑定 -->
<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"  <!-- 这里改为:polyline -->
    :circles="circles" 
    :polygons="polygons" 
    :include-points="includePoints">
</map>

// 在created或mounted中设置数据
created() {
    this.polygons = testPolygons;
    // 设置includePoints确保地图显示范围包含多边形
    this.includePoints = this.getPolygonBounds(testPolygons);
    console.log('polygons数据:', this.polygons);
},

methods: {
    // 计算多边形边界点
    getPolygonBounds(polygons) {
        const points = [];
        polygons.forEach(polygon => {
            polygon.points.forEach(point => {
                points.push(point);
            });
        });
        return points;
    }
}