首页 前端知识 Vue3 可视化大屏引入高德地图,超详细,超简单,保姆级教程。

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

2024-09-14 23:09:24 前端知识 前端哥 76 177 我要收藏

先上最终效果图

在这里插入图片描述

一、提前准备

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

4、填写好后点击添加Key

在这里插入图片描述

5、填写Key名称,选择Web端(JS API)勾选并同意协议

在这里插入图片描述

6、完成以上步骤就会得到Key和安全密钥。注意保管

二、项目下载高德地图

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

三、页面代码

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

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

2、引入高德地图

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

3、加载地图

const initMap = () => {
  AMapLoader.load({
    key: "申请到的key", // 申请好的Web端开发者Key,首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    // 需要使用的的插件列表
    plugins: [
      "AMap.Geocoder", // 逆向地理解码插件
      "AMap.Marker", // 点标记插件
      "AMap.MapType" // 地图类型
    ],
    AMapUI: {
      version: "1.1",
      plugins: ["overlay/SimpleMarker"]
    }
  }).then(AMap => {
    const map = new AMap.Map("map", {
      resizeEnable: true,
      zoom: 10
    });
	
	// 地图类型
    map.addControl(
     new AMap.MapType({
       defaultType: 0 //0代表默认,1代表卫星
     })
    );
    // 地图样式
    map.setMapStyle("amap://styles/darkblue");
    
    // 绘制标记点点
    var markerPoint = new AMap.Marker({
      position: [] // 经纬度 自行添加
    });
	
	// 点位标注
    markerPoint.setLabel({
      direction: "bottom",
      offset: new AMap.Pixel(0, 5), //设置文本标注偏移量
      content: `<div class='info'>${position.name}</div>` //设置文本标注内容
    });
    
    map.add(markerPoint);
    // 缩放地图到合适的视野级别
    map.setFitView();
  });
};
onMounted(async () => {
  // DOM初始化完成进行地图初始化
  initMap()
});

4、地图容器样式(增加定位 设置z-index 将地图放在最底部)

#map {
  height: 100vh;
  width: 100%;
  z-index: -99;
  position: fixed;
  bottom: 0;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18296.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!