vue3高德地图

文章讲述了如何在Vue项目中通过NPM安装AMapJSAPILoader,创建地图容器,设置样式,引入Loader,并在setup函数中声明和初始化地图,特别是在methods中定义initMap方法来创建3D地图并设置初始位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、NPM 安装 Loader

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

2、创建地图容器

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

3、设置地图容器样式(自行设置)

4、引入JS API  Loader 

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

5、初始化地图、在 setup() 函数中声明 map 对象

import { shallowRef } from '@vue/reactivity'

setup(){
  const map = shallowRef(null);
  return{
    map,
  }
},

6、创建地图

methods:{
  initMap(){
    AMapLoader.load({
      key:"",             // 申请好的Web端开发者Key,首次调用 load 时必填
      version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins:[''],       // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:5,           //初始化地图级别
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  },
},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值