vue项目中使用高德地图

1、步骤一：注册并登录高德地图开放平台，申请密钥

高德地图开放平台

操作步骤如下

2、步骤二：安装高德地图加载器

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

3、在src下创建Map文件夹 index.js文件

import AMapLoader from '@amap/amap-jsapi-loader'const mapLoader = (row = []) => {return new Promise((resolve, reject) => {AMapLoader.load({key: 'f8fe4a1cd0445f06f4191344755cf31b', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: row, // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: { // 是否加载 AMapUI，缺省不加载version: '1.1', // AMapUI 缺省 1.1plugins: [] // 需要加载的 AMapUI ui插件},Loca: { // 是否加载 Loca， 缺省不加载version: '2.0.0' // Loca 版本，缺省 1.3.2}}).then((AMap) => {resolve(AMap)}).catch(err => {// console.log(err)reject(err)})})
}export { mapLoader }

4、在组件中使用

<template><div id="map"></div>
</template><script>
import { mapLoader } from '@/Map'
import { onMounted } from 'vue'
export default {setup() {var aMapObj = null // 地图存储const mapMounted = () => {mapLoader().then((AMap) => {aMapObj = new AMap.Map('map', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 16, //初始化地图层级center: [121.357178, 31.227892],//中心点坐标viewMode: '2D',//使用3D视图layers: [new AMap.createDefaultLayer(), //默认new AMap.TileLayer.Satellite(),// 卫星new AMap.TileLayer.RoadNet()// 路网],})aMapObj.add(//地图标点new AMap.Marker({position: new AMap.LngLat(121.357100, 31.228169),}));})}onMounted(() => {mapMounted()})}};
</script><style lang="scss" scoped>
#map{width: 100vw;height: 100vh;
}
</style>

简单示例详细请参考官方指南

vue项目中使用高德地图相关推荐

在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
在vue项目中引入高德地图并使用
1.高德地图使用准备开发之前的准备需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
vue项目中使用高德地图行政区域聚合功能（script引入方式）
步骤一 :引入高德js资源 <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15& ...
在vue项目中引入高德地图及其UI组件的方法
https://www.jb51.net/article/146789.htm 转载于:https://www.cnblogs.com/sweeeper/p/11282700.html
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...

vue项目中使用高德地图

1、步骤一：注册并登录高德地图开放平台，申请密钥

vue项目中使用高德地图相关推荐

最新文章

热门文章