vue3使用腾讯地图api搜索地图中所有的学校

<template>
    <div class="map">
        <div class="map-title">周边配套</div>

        <div class="map-main">
            <div class="map-main-map" id="container"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import imgSrc1 from '/@/assets/frontend/Union.png'
import imgSrc2 from '/@/assets/frontend/assetAuction/juseditutp.png'
import { jsonp } from 'vue-jsonp'

// 父传子的值，里面有默认点位
const props = defineProps({
    initData: {
        type: Object,
        default: {},
    },
})

const TMap = (window as any).TMap

const center = ref(new TMap.LatLng(39.822349621652, 109.96280795932))

let map: any = null

let markerLayer: any = null

// 新增点位
const addMarkers = (locations: any, center: any, name = '') => {
    if (markerLayer) {

        let geometries = []

        // 如果locations存在，那么才渲染腾讯api的点位
        if (locations) {
            geometries = locations.map((item: any, index: any) => ({
                id: `marker-${index}`,
                styleId: 'school',
                position: new TMap.LatLng(Number(item.location.lat), Number(item.location.lng)),
                content: item.title,
            }));
        }

        // 默认点位
        const defaultCenter = {
            id: 'demo2',
            styleId: 'default',
            position: center,
            content: name,
        }

        geometries = [defaultCenter, ...geometries]

        markerLayer.setGeometries(geometries); // 更新所有标记
    }
};

// 腾讯api
const getMapAround = (position: any, center: any, name = '') => {
    jsonp(`https://apis.map.qq.com/ws/place/v1/search`, {
        key: '2KPBZ-2CMKL-A3ZPD-MH4RL-ZY6H2-RCBXU',
        keyword: encodeURIComponent('学校'),
        boundary: `nearby(${position[0]},${position[1]},1000)`,
        page_size: 20,
        page_index: 1,
        output: 'jsonp',
    }).then((response: any) => {
       
       // 如果调用成功了，传过去，失败就代表api上限了，那么就显示默认
        if (response.data) {
            addMarkers(response.data, center, name);
        } else {
            addMarkers(null, center, name);
        }

    }).catch(function (error: any) {
        console.log("🚀 ~ getMapAround ~ error:", error)
    });

}

const init = () => {
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new TMap.Map(document.getElementById('container'), {
        center: center.value, //设置地图中心点坐标
        zoom: 16, //设置地图缩放级别
        mapStyleId: 'style1', //设置地图样式
    })

    markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
            default: new TMap.MarkerStyle({
                width: 134, // 宽度
                height: 32, // 高度
                src: imgSrc1,
                color: '#fff', // 标注点文本颜色
                size: 12, // 标注点文本文字大小
                offset: { x: 0, y: -3 },
            }),
            school: new TMap.MarkerStyle({
                width: 32, // 宽度
                height: 32, // 高度
                src: imgSrc2,
                color: '#333', // 标注点文本颜色
                size: 12, // 标注点文本文字大小
                offset: { x: 0, y: 20 },
            }),
        },
    })
}

onMounted(() => {
    init()
})

watch(
    () => props.initData,
    (newVal) => {
        if (newVal?.home?.position) {
            const position = newVal.home.position.split(',')

            if (position.length === 2) {
                center.value = new TMap.LatLng(Number(position[0]), Number(position[1]))
                if (map) {
                    map.setCenter(center.value)
                    getMapAround(position, center.value, newVal?.home?.name)
                }
            }
        }
    },
    { immediate: true }
)
</script>

<style scoped lang="scss">
.map {
    margin-top: 52px;

    .map-title {
        font-weight: 500;
        font-size: 24px;
        color: #333333;
    }

    .map-main {
        margin-top: 16px;
        display: flex;

        .map-main-map {
            width: 100%;
            height: 420px;
        }
    }
}
</style>