Vue 3.0使用高德地图 vue-amap

这篇文章写一下高德地图的简单应用，本人也是刚入坑，在研究阶段
注册高德开发者账号，申请KEY完成注册

注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框：

vue安装vue-amap

npm install vue-amap --save

index.html 引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你的key"></script>

也可以min.js引入，我是用的index.html里引入

 import VueAMap from 'vue-amap'
// Vue.use(VueAMap)
// VueAMap.initAMapApiLoader({//   key: '', //高德的key（自己申请）
//   plugin:  ['AMap.Autocomplete', 'AMap.PlaceSearch',
//   'AMap.Scale', 'AMap.OverView',
//   'AMap.ToolBar', 'AMap.MapType',
//   'AMap.PolyEditor', 'AMap.CircleEditor',
//   'AMap.Geolocation'],//引用的插件（根据需要引入）
// uiVersion: '1.0',//UI库 版本
v: '1.4.4', //高德SDK 版本// })

配置vue.config.js

module.exports = {devServer: {port: 8080 // 端口号配置},configureWebpack: {externals: {'AMap': 'AMap' // 高德地图配置}}}

配置完得重启一下
创建组件

<template><div class="box"><div id="container" style="width:750px; height:300px"></div></div>
</template><script>
import AMap from 'AMap' // 引入高德地图
export default {mounted () {this.init()},methods: {init () {var map = new AMap.Map('container', {resizeEnable: true,center: [116.397428, 39.90923],zoom: 13,viewMode:'3D'//使用3D视图});//实时路况图层var marker = new AMap.Marker({position:[116.39, 39.9]//位置})map.add(marker);//添加到地图}}
}
</script>

路由按需加载会报错，搞了我老长时间，完事就可以使用了，别的功能实现去看官网

Vue 3.0使用高德地图 vue-amap相关推荐

在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
html 加载高德地图,vue异步加载高德地图
几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
高德地图 Vue 中加载数据可视化 Loca 的方式
高德地图 Vue 中加载数据可视化 Loca 的方式今天想用 Loca 试试如何的,结果怎么都加载不上,我的代码是这样的 AMapLoader.load({key: "这个就不展示了& ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
Vue 2.x 使用高德地图JS API 2.0加载起点终点路径轨迹
背景最近在开发 H5 页面,需求是在地图中显示行驶轨迹,在 H5 中调起地图app,轨迹经纬度列表由接口提供,坐标系为国际标准的坐标体系 WGS84,刚开始并未注意这个坐标系问题,在使用中发现位置加 ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...

Vue 3.0使用高德地图 vue-amap

Vue 3.0使用高德地图 vue-amap相关推荐

最新文章

热门文章