Vue3 可视化大屏引入高德地图，超详细，超简单，保姆级教程。 ...

先上终极结果图

一、提前准备

   1、 前往 高德开放平台 进行账号注册。如果手机上有高德地图App并且已经登录过，则可以直接选择登录
  

   2、注册/登录完成后来到 控制台-->应用管理-->我的应用-->点击创建新应用
  

   3、填写好应用名称和选择应用类型
  

   4、填写好后点击添加Key
  

   5、填写Key名称，选择Web端（JS API）勾选并同意协议
  

   6、完成以上步调就会得到Key和安全密钥。注意保管
  二、项目下载高德地图

1. npm install @amap/amap-jsapi-loader --save

复制代码

三、页面代码

   1、准备一个容器 必须要有id

1. <div id="map"></div>

复制代码

  2、引入高德地图

1. import AMapLoader from "@amap/amap-jsapi-loader";

复制代码

  3、加载地图

1. const initMap = () => {
2.   AMapLoader.load({
3.     key: "申请到的key", // 申请好的Web端开发者Key，首次调用 load 时必填
4.     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
5.     // 需要使用的的插件列表
6.     plugins: [
7.       "AMap.Geocoder", // 逆向地理解码插件
8.       "AMap.Marker", // 点标记插件
9.       "AMap.MapType" // 地图类型
10.     ],
11.     AMapUI: {
12.       version: "1.1",
13.       plugins: ["overlay/SimpleMarker"]
14.     }
15.   }).then(AMap => {
16.     const map = new AMap.Map("map", {
17.       resizeEnable: true,
18.       zoom: 10
19.     });
20.        
21.         // 地图类型
22.     map.addControl(
23.      new AMap.MapType({
24.        defaultType: 0 //0代表默认，1代表卫星
25.      })
26.     );
27.     // 地图样式
28.     map.setMapStyle("amap://styles/darkblue");
29.    
30.     // 绘制标记点点
31.     var markerPoint = new AMap.Marker({
32.       position: [] // 经纬度 自行添加
33.     });
34.        
35.         // 点位标注
36.     markerPoint.setLabel({
37.       direction: "bottom",
38.       offset: new AMap.Pixel(0, 5), //设置文本标注偏移量
39.       content: `<div class='info'>${position.name}</div>` //设置文本标注内容
40.     });
41.    
42.     map.add(markerPoint);
43.     // 缩放地图到合适的视野级别
44.     map.setFitView();
45.   });
46. };

复制代码

1. onMounted(async () => {
2.   // DOM初始化完成进行地图初始化
3.   initMap()
4. });

复制代码

  4、地图容器样式（增长定位 设置z-index 将地图放在最底部）

1. #map {
2.   height: 100vh;
3.   width: 100%;
4.   z-index: -99;
5.   position: fixed;
6.   bottom: 0;
7. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。