vue3+高德地图

今天来实现一个小型的案例，如何利用vue3实现高德地图在页面展示的效果。

1.NPM 安装 Loader

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

2.创建地图容器

<template>
    <div id="container"></div>
</template>

3.引入JS API  Loader

import AMapLoader from "@amap/amap-jsapi-loader"

4.定义一个map对象并且初始化地图

import { onMounted, shallowRef} from 'vue'
const map = shallowRef(null);//定义一个map对象
//初始化地图
const initMap=()=>{
    AMapLoader.load({
        key:'你自己申请的密钥',  //设置密钥
        version:"2.0",//版本
        plugins:['AMap.Geolocation','AMap.ToolBar','AMap.HawkEye','AMap.MapType'],
    }).then((AMap)=>{
        map.value = new AMap.Map("container",{
            viewMode:"3D",//地图模式
            pitch:20,//角度
            zoom:11,//缩放，缩放级别在3-15
            zooms:[2,22],
            mapStyle: 'amap://styles/blue', //设置地图的显示样式
            center:[118.767413,32.041544],//初始化地图中心点位置
        });
    }).catch(e=>{
        console.log(e);
    })
}
onMounted(()=>{
    initMap()
})

5.后续便是添加一些标记、覆盖物、信息窗体等。

以下是全部代码

<template>
    <div id="container"></div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader"
import { onMounted, shallowRef} from 'vue'
const map = shallowRef(null);//定义一个map对象
//初始化地图
const initMap=()=>{
    AMapLoader.load({
        key:'你自己申请的密钥',  //设置密钥
        version:"2.0",//版本
        plugins:['AMap.Geolocation','AMap.ToolBar','AMap.HawkEye','AMap.MapType'],
    }).then((AMap)=>{
        map.value = new AMap.Map("container",{
            viewMode:"3D",//地图模式
            pitch:20,//角度
            zoom:11,//缩放，缩放级别在3-15
            zooms:[2,22],
            mapStyle: 'amap://styles/blue', //设置地图的显示样式
            center:[118.767413,32.041544],//初始化地图中心点位置
        });

        map.value.addControl(new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        }))//定位，提供了获取用户当前准确位置、所在城市的方法
        map.value.addControl(new AMap.MapType())//图层切换，用于几个常用图层切换显示
        // map.clearMap();//清除地图上所有的覆盖物
        let positionArr = [
            [118.80,32.05],
            [118.77,32.07],
            [118.88,32.12],
            [118.62,32.05],
            [118.83,32.35],
            [118.85,31.95],
            [118.76,32.03],
            [118.75,31.88],
            [118.76641,32.03096],
            [118.7799,31.99202],
            [118.79815,32.01112]
        ];
        for(let item of positionArr){
            let marker = new AMap.Marker({
                position:[item[0],item[1]],
            });

            let content = [];
        // 实例化信息窗体
            content.push("<div style=\"background: #042d7e;width: 200px;border: 1px solid #0774f9;padding: 10px;border-radius: 10px\">\n" +
            "      <div style=\"width: 200px;height: 20px;line-height: 20px;\">\n" +
            "        <span style=\"display: inline-block; vertical-align: middle; font-size:18px;color:#5596e7\">出入口流量Top1 </span>\n" +
            "        <img id=\"closeX\" style=\"cursor:pointer; display:inline-block;vertical-align: middle;float: right;padding-right: 20px;padding-top: 5px\" src=\"https://webapi.amap.com/images/close2.gif\" alt=\"关闭\">\n" +
            "      </div>\n" +
            "      <hr>\n" +
            "      <div style=\"display:flex;justify-content: space-between;align-items: center;\">\n" +
            "        <p style=\"font-size:14px;color:#fff;\">收费站</p>\n" +
            "        <h2 style=\"margin: 5px 10px;background: linear-gradient(to top, rgba(5, 203, 253, 0.5), rgb(208, 235, 253));-webkit-background-clip: text;color: transparent;\">729322</h2>\n" +
            "        <p style=\"font-size:14px;color:#fff;\">辆</div>\n" +
            "      </div>\n" +
            "    </div>");
            map.value.add(marker);//添加标记
            //给每个marker注册点击事件
            marker.on('click',function(e){
                //创建并打开一个信息框
                // 创建 infoWindow 实例	
               var infoWindow = new AMap.InfoWindow({ 
                //信息框的内容
               content: "hello world",
               //位置偏移
               offset: new AMap.Pixel(0, -30),
               isCustom: true,  //使用自定义窗体
               content: content, //调用创建信息窗体的方法--信息窗体的内容
               });
               // 打开信息窗体
               infoWindow.open(map.value,e.target.getPosition());
            })
        }
    }).catch(e=>{
        console.log(e);
    })
}
onMounted(()=>{
    initMap()
})
</script>

<style  scoped>

#container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

</style>

7.效果图展示