jiaju/pages/aboutUs/aboutUs.vue

<template>
    <view class="avaout">
         <page-head text="关于我们"  brF="true"  navState="true" ></page-head>
        <view class="mapCon">
            <map id="map" class="map" :show-location="true" scale="9" :latitude="aboutData.lat" :longitude="aboutData.lon"></map>
        </view>
        <view class="daohang" @click="daohang()">
            导航到我们
        </view>
        <view class="title">
             关于我们
        </view>
        <view class="text" v-html="aboutData.content">
            
        </view>
    </view>
</template>

<script>
    const img = '/static/logo.png';
    export default {
        data() {
            return {
                latitude: 23.099994,
                aboutData: {},
                longitude: 113.324520,
            }
        },
        created() {
            this.getabout()
        },
        onReady() {
            this._mapContext = uni.createMapContext("map", this);
            this._mapContext.initMarkerCluster({
                enableDefaultStyle: false,
                zoomOnClick: true,
                gridSize: 60,
                complete(res) {
                    console.log('initMarkerCluster', res)
                }
            });
            this._mapContext.on("markerClusterCreate", (e) => {
                console.log("markerClusterCreate", e);
            });

        },
        methods: {
            getabout() {
                this.requestToken({
                    url: this.host + "/api/index/about",
                    type: "post",
                    data: { 
                        is_gome: 0,
                    },
                    success: (res) => {
                        this.aboutData = res.data.data
                    }
                })
            },
            daohang() {
   
                uni.getLocation({ //获取当前经纬度
                    type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
                    success: (res) => {
                        wx.openLocation({ //使用微信内置地图查看位置。
                        address:this.aboutData.address,
                            latitude: this.aboutData.lat * 1, //要去的纬度-地址
                            longitude: this.aboutData.lon * 1, //要去的经度-地址
                            fail: err => {
                                this.$toolAll.tools.showToast('地址信息错误');
                            }
                        })
                    }
                })
            },
            
        }
    }
</script>

<style>
    .avaout {
        padding: 0rpx 40rpx 40rpx 40rpx;
    }

    .mapCon {
        width: 100%;
        height: 390rpx;
        border-radius: 25rpx;
        margin-top: 40rpx;
        -webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
        overflow: hidden;
        border: 2rpx solid #DDDDDD; 

    }

    .map {
        width: 100%;
        height: 100%
    }
    .daohang{
        width: 667rpx;
        height: 98rpx;
        text-align: center;
        line-height: 98rpx;
        background-color: #000;
        color: #FFFFFF;
        border-radius: 30rpx;
        margin-top: 30rpx;
        font-size: 36rpx;
        font-weight: bold;
    }
    .title{
        font-size: 48rpx;
        padding: 85rpx 0rpx;
        font-weight: bold;
    }
    .text{
        font-size: 30rpx;
        color: #8c8c9b;
    }
        
    .text img{
        width: 100%;
    }
</style>