1***@qq.com
1***@qq.com
  • 发布:2023-11-07 15:35
  • 更新:2023-11-07 15:35
  • 阅读:174

renderjs中高德地图无法加载

分类:uni-app
<template>  
    <view id="amap-id" :prop="state" :change:prop="amap.updateAMap" />  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                latitude: 0,  
                longitude: 0,  
            };  
        },  
        computed: {  
            state() {  
                return {  
                    longitude: this.longitude,  
                    latitude: this.latitude,  
                };  
            },  
        },  
        created() {  
            uni.getLocation({  
                type: 'gcj02',  
                // 解析地址信息  
                geocode: true,  
                success: res => {  
                    const {  
                        longitude,  
                        latitude  
                    } = res;  
                    // 经度  
                    this.longitude = longitude;  
                    // 纬度  
                    this.latitude = latitude;  
                },  
            });  
        },  
        methods: {  
            getState(state) {  
                this.longitude = state.longitude;  
                this.latitude = state.latitude;  
            },  
        },  
    };  
</script>  

<script module="amap" lang="renderjs">  
    export default {  
        mounted() {  
            this[window?.AMap ? 'initAMap' : 'createAMap']();  
        },  
        methods: {  
            createAMap() {  
                const key = '***';  
                const token = '***';  

                window._AMapSecurityConfig = {  
                    securityJsCode: token,  
                };  

                const script = document.createElement('script');  
                script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}`;  
                script.onload = () => {  
                    this.initAMap()  
                }  

                document.head.appendChild(script);  
            },  
            initAMap() {  
                const center = Object.values(this.state)  
                const map = new AMap.Map('amap-id', {  
                    // 设置地图显示的缩放级别  
                    zoom: 16,  
                    // 初始化地图中心点  
                    center: center,  
                });  

                const circle = new AMap.Circle({  
                    center: center,  
                    radius: 150,  
                    strokeWeight: 0,  
                    strokeOpacity: 0,  
                    fillOpacity: 0.2,  
                    fillColor: '#286FFF',  
                    zIndex: 50,  
                })  
                map.add(circle);  
                map.setFitView([circle]);  

                // FIX: 无法展示  
                const marker = new AMap.Marker({  
                    icon: "/static/image/tabbar/community-active.png",  
                    position: center,  
                    offset: new AMap.Pixel(-13, -30)  
                });  
                marker.setMap(map);  

            },  
            updateAMap(newValue, oldValue, vn) {  
                // vn.callMethod('getState', newValue)  
            }  
        },  
    };  
</script>  

<style lang="scss" scoped>  
    #amap-id {  
        width: 100%;  
        height: 100%;  
    }  

    ::v-deep .amap-logo {  
        opacity: 0 !important;  
        display: none !important;  
    }  

    ::v-deep .amap-copyright {  
        opacity: 0 !important;  
        display: none !important;  
    }  
</style>
2023-11-07 15:35 负责人:无 分享
已邀请:

要回复问题请先登录注册