0


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

先上最终效果图

在这里插入图片描述

一、提前准备

1、 前往 高德开放平台 进行账号注册。**

如果手机上有高德地图App并且已经登录过

**,则可以直接选择登录

在这里插入图片描述

2、注册/登录完成后来到 **

控制台-->应用管理-->我的应用-->点击创建新应用

**

在这里插入图片描述

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

在这里插入图片描述

4、填写好后点击添加Key

在这里插入图片描述

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

在这里插入图片描述

6、完成以上步骤就会得到Key和安全密钥。**

注意保管

**

二、项目下载高德地图

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

三、页面代码

1、准备一个容器 **

必须要有id

**

<divid="map"></div>

2、引入高德地图

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

3、加载地图

constinitMap=()=>{
  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 =newAMap.Map("map",{
      resizeEnable:true,
      zoom:10});// 地图类型
    map.addControl(newAMap.MapType({
       defaultType:0//0代表默认,1代表卫星}));// 地图样式
    map.setMapStyle("amap://styles/darkblue");// 绘制标记点点var markerPoint =newAMap.Marker({
      position:[]// 经纬度 自行添加});// 点位标注
    markerPoint.setLabel({
      direction:"bottom",
      offset:newAMap.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://blog.csdn.net/favourite23/article/details/140680900
版权归原作者 Favourite23 所有, 如有侵权,请联系我们删除。

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

还没有评论