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>