uniapp - 微信小程序 地图

使用方法
微信小程序JavaScript SDK；
采用腾讯地图sdk

<template>
    <view>
        <view>
            <map :latitude="latitude" :longitude="longitude" :markers="markers" class="map"></map>
            <view class="map-bottom">
                <view @tap="searchNearby(\'购物\')" :style="{ color: active == \'购物\' ? activeColor : \'black\' }">购物 </view>
                <view @tap="searchNearby(\'教育\')" :style="{ color: active == \'教育\' ? activeColor : \'black\' }">教育 </view>
                <view @tap="searchNearby(\'交通\')" :style="{ color: active == \'交通\' ? activeColor : \'black\' }">交通 </view>
                <view @tap="searchNearby(\'医疗\')" :style="{ color: active == \'医疗\' ? activeColor : \'black\' }">医疗 </view>
            </view>
        </view>
    </view>
</template>

<script>
import QQMapWX from \'@/js_sdk/qqmap-wx-jssdk/qqmap-wx-jssdk.js\';
import { mapGetters } from \'vuex\';
export default {
    data() {
        return {
            latitude: \'\',
            longitude: \'\',
            centerTitle: \'\',
            markers: [],
            qqmapsdk: \'\',
            active: \'\',
        };
    },
    methods: {
        searchNearby(keyword) {
            let location = this.latitude + \',\' + this.longitude;
            let that = this;
            that.active = keyword;
            // 调用接口
            that.qqmapsdk.search({
                keyword: keyword, //搜索关键词
                location: location, //设置周边搜索中心点
                success: function (res) {
                    const mks = [];
                    for (var i = 0; i < res.data.length; i++) {
                        mks.push({
                            width: 20,
                            height: 35,
                            iconPath: \'/static/icon/mapIcon.png\',
                            title: res.data[i].title,
                            id: res.data[i].id,
                            latitude: res.data[i].location.lat,
                            longitude: res.data[i].location.lng,
                            callout: {
                                content: res.data[i].title,
                                fontSize: 12,
                                borderRadius: 5,
                                padding: 5,
                                display: \'ALWAYS\',
                            },
                        });
                    }
                    that.setMarkers(mks);
                },
                fail: function (res) {
                    console.log(res);
                },
                complete: function (res) {
                    console.log(res);
                },
            });
        },
        //搜索
        setMarkers(marks) {
            let that = this;
            that.markers = marks;
            that.$forceUpdate();
        },
    },
    computed: {
        ...mapGetters([\'activeColor\', \'navbar\']),
    },
    onLoad(option) {
        this.qqmapsdk = new QQMapWX({
            key: \'\', //申请的key
        });
        uni.showLoading({
            title: \'加载中\',
        });
        if (option) {
            this.longitude = option.lon;
            this.latitude = option.lat;
            this.centerTitle = option.title;
            // 地图
            this.markers = [
                {
                    width: 20,
                    height: 23,
                    iconPath: \'/static/icon/ditu.png\',
                    id: 0,
                    latitude: this.latitude,
                    longitude: this.longitude,
                    title: this.centerTitle,
                    callout: {
                        borderRadius: 5,
                        content: this.centerTitle,
                        display: \'ALWAYS\',
                        fontSize: 12,
                        padding: 5,
                    },
                },
            ];
            this.$nextTick(() => {
                uni.hideLoading();
            });
        }
    },
};
</script>

<style lang=\'scss\' scoped>
.map-bottom {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    height: 120rpx;
    line-height: 120rpx;
    view {
        width: 25%;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
    }
}
.map {
    height: calc(100vh - 120rpx);
    width: 100%;
}
</style>