uni-app 地图 的 气泡点与标签显示

2022-05-17  本文已影响0人  加冰宝贝

整体写法如下:

<template>
    <view class="index-sign-up bg-ff">
        <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers"
            :scale="14" :enable-building="true"></map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'map',
                latitude: 22.545809,
                longitude: 113.985274,
                covers: [{
                    address: '广东省深圳市南山区沙河街道星河街社区侨城西街',
                    title: '深圳欢乐谷',
                    id: 11,
                    latitude: 22.545809,
                    longitude: 113.985274,
                    iconPath: "/static/img/wz.png", //图标路径  图标路径需要后台生成
                    width: 29,
                    height: 29,
                    callout: { //marker气泡
                        content: '深圳欢乐谷',
                        bgColor: "rgba(255,255,255,0.71)",
                        borderRadius: 4,
                        padding:8,
                        fontSize: 16,
                        color: "#000000",
                        textAlign: "center",
                        display: 'ALWAYS',
                        x:110,
                        y:110
                    },
                    label: {//标签设置
                        content: '深圳欢乐谷',
                        bgColor: "rgba(255,255,255,0.71)",
                        borderWidth: 1,
                        borderColor: '#A5A5A5',
                        borderRadius: 4,
                        padding: 8,
                        fontSize: 16,
                        color: "#000000",
                        textAlign: "center",
                        x: 0,
                        y: 0,
                        anchorX: 0,
                        anchorY: 0
                    }
                }],
            }
        },

        onLoad() {
            uni.getLocation({
                type: 'wgs84',
                success: function(res) {
                    console.log('当前位置的经度:' + res.longitude);
                    console.log('当前位置的纬度:' + res.latitude);
                },
                complete: (res) => {
                    console.log(res);
                }
            });
        },
    }
</script>

<style lang="scss" scoped>
    .index-sign-up {
        width: 100%;
        height:100vh;
        overflow: hidden;
        map {
            width: 100%;
            height: 80vh;
        }
    }
</style>

上一篇 下一篇

猜你喜欢

热点阅读