zx_bms_uni/pages/warnMap/warnMap.vue

<template>
    <view class="container">
        <map
            id="myMap"
            :longitude="alarmInfo.longitude"
            :latitude="alarmInfo.latitude"
            scale="14"
            :markers="marker"
            @markertap="bindMarkertap"
            show-location
            style="width: 100%; height: 100vh"
            @tap="bindTapMap"
        ></map>
    </view>
</template>

<script>
// pages/warmMap/warnMap.js
const config = require('../../common/config.js');
const common = require('../../common/common.js');
var storage = require('../../common/storage.js');
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
export default {
    data() {
        return {
            alarmInfo: {
                longitude: '',
                latitude: ''
            },
            marker: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('报警位置')
		});
        const index = options.index;
        this.readyAlarmInfo();
    },
	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t('报警位置')
		});
	},
    methods: {
        readyAlarmInfo() {
            const me = this;

            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: config.QQ_MAP_KEY
            });
            const thisAlarm = storage.getAlarmInfo();
            console.log(thisAlarm);
            qqmapsdk.reverseGeocoder({
                location: {
                    latitude: thisAlarm.latitude,
                    longitude: thisAlarm.longitude
                },
                success: function (res) {
                    console.log(res);
                    const formatted_addresses = res.result.formatted_addresses;
                    const address = res.result.address; //+ formatted_addresses.recommend
                    let ps = '';
                    let tmp_addr = me.$t('地址')+': '+ + address;
                    while (tmp_addr.length > 15) {
                        ps += tmp_addr.substring(0, 15) + '\n';
                        tmp_addr = tmp_addr.substring(15);
                    }
                    ps += tmp_addr;
                    const content =
                        me.$t('名称')+': ' +
                        thisAlarm.macid +
                        '\n'+me.$t('状态')+ ': ' +
                        thisAlarm.alarm_desc +
                        '\n'+me.$t('信号')+ ': ' +
                        common.formatTime(thisAlarm.gps_time) +
                        '\n'+me.$t('时间')+ ': ' +
                        common.formatTime(thisAlarm.send_time) +
                        '\n' +
                        ps;
                    me.setData({
                        alarmInfo: thisAlarm,
                        marker: [
                            {
                                id: 1,
                                latitude: thisAlarm.latitude,
                                longitude: thisAlarm.longitude,
                                name: '',
                                iconPath: 'https://qiniu.bms16.com/FkjUlfdPB1qabw-qNWCRQtiD-s55',
                                width: 35,
                                height: 35,
                                callout: {
                                    content: content,
                                    padding: 10,
                                    borderRadius: 4,
                                    boxShadow: '4px 8px 16px 0 rgba(0,0,0,0.3)',
                                    display: 'ALWAYS'
                                }
                            }
                        ]
                    });
                }
            });
            console.log(this.alarmInfo);
        },

        bindMarkertap() {
            console.log('占位：函数 bindMarkertap 未声明');
        },

        bindTapMap() {
            console.log('占位：函数 bindTapMap 未声明');
        }
    }
};
</script>
<style>
@import './warnMap.css';
</style>