uniapp+renderjs+高德地图

林安

2023 年 07 月 11 日

851 次浏览

1 条评论

6596字数

Map

写在前面

uniapp封装了主流的地图SDK，包括高德地图，但是在使用中发现个性化自由度较低，还存在一些一直没有修改的bug

例如：给地图打点添加label在真机上运行时没有设置的效果，修改样式不生效

高德的apijs只能在web端使用，运行到移动端会直接报错，且不加载任何东西，因此使用renderjs解决H5渲染地图的问题

简单使用

<template>
    <view>
        <view class="head" @click="mychange">{{ message }}</view>
        <!-- :message="message" :change:message="renderTest.messageChanged"
         service层一旦message发生改变，会调用 renderjs中的messageChanged的方法
         -->
        <!-- service层data中数据的改变操作放在service层 -->
        <view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" :prop="message"
            :change:prop="renderTest.changeWatch" id="renderId">
        </view>
    </view>
</template>

<script>
// service 层
export default {
    data() {
        return {
            message: "renderjs高德",
            machineObjDate: [
                {
                    id: 140,
                    state: 1,
                    type: '1',
                    minuteFirstDate: '2023-04-06 12:50:31',
                    city: '江阴',
                    auto: 1,
                    latitude: 31.920018,
                    mn: '20220901100005',
                    apiIp: '172.0.0.1',
                    projectName: '江阴高新区',
                    province: '江苏',
                    minuteEndDate: '2023-04-06 12:50:31',
                    longitude: 120.303843,
                    title: '高新创业园2'
                },
                {
                    id: 141,
                    state: 1,
                    type: '1',
                    minuteFirstDate: '2023-04-06 12:50:37',
                    city: '江阴',
                    auto: 1,
                    latitude: 31.919999,
                    mn: '20220901100007',
                    apiIp: '172.0.0.1',
                    projectName: '江阴高新区',
                    province: '江苏',
                    minuteEndDate: '2023-04-06 12:50:31',
                    longitude: 120.303733,
                    title: '高新创业园3'
                },
                {
                    id: 142,
                    state: 1,
                    type: '1',
                    minuteFirstDate: '2023-04-07 12:14:42',
                    city: '江阴',
                    auto: 1,
                    latitude: 31.902379,
                    mn: '20210524110035',
                    apiIp: '172.0.0.1',
                    projectName: '江阴南理工学校',
                    province: '江苏',
                    minuteEndDate: '2023-04-06 12:50:31',
                    longitude: 120.158819,
                    title: '南理工东南角'
                },
            ]
        }
    },
    onLoad() {
        plus.navigator.closeSplashscreen()
    },
    methods: {
        onViewClick(options) {
            console.log(options)
            this.message = options.test
            uni.showModal({
                title: "数据传递",
                content: options.test
            })
        },
        getMessage(options) {
            console.log("测试renderjs调用此方法：" + JSON.stringify(options))
        },
        mychange() {
            this.message = '11'
        }
    }
}
</script>

<script module="renderTest" lang="renderjs">
    export default {
        data() {
            return {
                map: null,
                markers: [],
            }
        },
        mounted() {
            if (window && window.AMap) {
                this.initAmap();
            } else {
                window._AMapSecurityConfig = {
                    securityJsCode: '', // key
                };
                const script = document.createElement('script');
                script.src =
                    'https://webapi.amap.com/maps?v=2.0&key=***&plugin=AMap.ControlBar';
                script.onload = () => {
                    this.initAmap()
                };
                document.head.appendChild(script);
            }
        },
        methods: {
            initAmap() {
                // 初始化
                this.map = new AMap.Map('renderId', {
                    resizeEnable: true,
                    center: [120.158819, 31.902379],
                    zoom: 11
                })
                this.machineObjDate.map((data) => {
                    let icon = new AMap.Icon({
                        // 图标尺寸
                        // size: new AMap.Size(25, 25),
                        // 图标的取图地址
                        image: 'http://124.223.55.65:8083/zs_img/22.gif',
                        // 图标所用图片大小
                        imageSize: new AMap.Size(30, 50),
                        // 图标取图偏移量
                        // imageOffset: new AMap.Pixel(-9, -3)
                    });
                    let marker = new AMap.Marker({
                        position: new AMap.LngLat(data.longitude, data.latitude),
                        zIndex: 999,
                        // position: new AMap.LngLat(data.longitude, data.latitude),
                        title: data.title, // 鼠标滑过点标记时的文字提示
                        icon: icon,
                        //content: markerContent.value, // 引入上面HTML元素字符串
                        offset: new AMap.Pixel(-15, -15),
                    })
                    
                    marker.on("click", () => {
                        console.log(data.title,'marker')
                    })
                    
                    // this.markers.push(marker)
                    var text = new AMap.Text({
                        text: data.title,
                        anchor: 'center', // 设置文本标记锚点
                        draggable: false,
                        cursor: 'pointer',
                        // angle: 10,
                        zIndex: 999,
                        style: {
                            // 'padding': '0',
                            'margin-bottom': '40px',
                            'border-radius': '8px',
                            // 'width': '15rem',
                            'border-width': 0,
                            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                            'text-align': 'center',
                            'font-size': '12px',
                            'background-color': '#ccc',
                            'color': '#000'
                        },
                        position: [data.longitude, data.latitude]
                    });
                    text.on('click', () => {
                        console.log(data.title,'text')
                    })
                    
                    this.map.add(text)
                    this.map.add(marker)
                })
                
                
                // 动态设置css，去掉高德的logo
                const style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.amap-logo {opacity: 0 !important; display: none !important;z-index: -99999999 !important;}';
                document.head.appendChild(style);
            },
            // id 为 renderId的区域，点击触发的事件
            onClick(event, ownerInstance) {
                console.log(event)
                // 调用 service层的onViewClick方法,传值
                console.log(this.message, "************************")
                ownerInstance.callMethod('onViewClick', {
                    test: '这是点击renderjs的区域，向service层传递变量'
                })
            },
            //看成是watch?
            messageChanged(newValue, oldValue, ownerVm, vm) {
                console.log("newValue*********" + newValue)
                console.log("oldValue*********" + oldValue)
                ownerVm.callMethod('getMessage', {
                    test: '123'
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.head {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(149, 203, 213, .5);
    z-index: 999;
}

#renderId {
    width: 100%;
    height: 93.5vh;
    background-color: #00818A;
}

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

::v-deep .amap-copyright {
    opacity: 0 !important;
    display: none !important;
}
</style>