基于vue和TS使用高德地图

基于vue和TS使用高德地图

目录

• 基于vue和TS使用高德地图

环境准备

npm i @amap/amap-jsapi-loader --save

显示地图及Marker

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader"

let map = null

onMounted(() => {
    AMapLoader.load({
        key: "",
        version: "2.0",
        plugins: [],
    }).then((AMap) => {
        map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: "3D",
            zoom: 11,
            center: [116.397428, 39.90923]
        })
        const marker = new AMap.Marker({
            icon: "src/assets/normal_32.png",
            position: new AMap.LngLat(116.39, 39.9),
            title: "北京",
        })
        marker.on("click", function (e) {
            console.log(e)
            marker.setIcon("src/assets/select_32.png")
            alert("你点击了Marker")
        })
        map.add(marker)

        const text = new AMap.Text({
            text: "纯文本标记", //标记显示的文本内容
            anchor: "center", //设置文本标记锚点位置
            draggable: false, //是否可拖拽
            cursor: "pointer", //指定鼠标悬停时的鼠标样式。
            angle: 0, //点标记的旋转角度
            style: {
                //设置文本样式，Object 同 css 样式表
                // "padding": ".75rem .75rem",
                "margin-bottom": ".5rem",
                "border-radius": ".25rem",
                "background-color": "white",
                "width": "5rem",
                "border-width": 0,
                "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
                "text-align": "center",
                "font-size": "10px",
                "color": "blue",
            },
            position: [116.39, 39.888203], //点标记在地图上显示的位置
        });
        text.setMap(map); //将文本标记设置到地图上   
    }).catch((e) => {
        console.log(e)
    })
})
onUnmounted(() => {
    map?.destroy();
})
</script>