vue3怎么引入高德地图

1.在高德开发平台申请你的key高德开发平台

2.在public/index.html引入高德的cdn

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key,在高德控制台可以看到"></script>

在这里插入代码片

3.在vue.config.js全局配置引入的高德地图cdn

module.exports = {configureWebpack: {externals: {AMap: 'AMap'}}
}

4.重新运行项目

5.在需要的vue文件中调用高德地图

import AMap from 'AMap'
import { onMounted, reactive, toRefs } from 'vue';export default {setup() {const state = reactive({});//高德地图引入const gaode = () =>{// 创建地图实例let map = new AMap.Map("map", {center: [114.298572, 30.584355],zoom: 11.2,// showLabel: false, //不显示地图文字标记});map.setCity("武汉市"); //初始化显示的区域var styleName = "amap://styles/" + "blue";//底部颜色map.setMapStyle(styleName);//极夜蓝new AMap.Marker({map: state.mapObj,position: new AMap.LngLat("226", "335"), //此处根据页面数据可以直接传入经纬度进行描点});}onMounted(() => {gaode() });return {...toRefs(state),};},
};

vue3怎么引入高德地图相关推荐

【vue3引入高德地图】
vue3引入高德地图文章目录 vue3引入高德地图前言一.准备工作 1.开发文档 2.添加应用二.使用步骤 1.npm 安装 2.地图容器创建 3.组件引入 4.js api 安全密钥 5.初 ...
vue3 引入高德地图实例
vue3高德地图进阶版地图引入进阶文章末尾有完整代码关于vue项目如何引入高德地图以及一些基础用法见上一篇文章
前端系列19集-vue3引入高德地图，响应式，自适应
npm i @amap/amap-jsapi-loader --save import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAP ...
在vue项目中引入高德地图并使用
1.高德地图使用准备开发之前的准备需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...
vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...
uniapp 打包app 引入高德地图sdk
uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成并配置到项目中 4. 地 ...
企业微信公众号网页开发之引入高德地图API
test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码一.JS ...

vue3怎么引入高德地图

vue3怎么引入高德地图相关推荐

最新文章

热门文章