在vue中引入高德地图

既然要用到高德地图首先要申请成为高德地图开发者，并申请使用高德地图的key这两点在这篇文章就不过多赘述，有需要的小伙伴可以查查资料，或者去高德地图api官网都有很详细的介绍。高德地图官网
简单提一下申请秘钥流程（web端）
控制台–>应用管理–>我的应用

好啦！步入正题，在vue项目中引入高德地图

一、下载依赖

npm 安装：

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

或者 yarn 安装：

yarn add @amap/amap-jsapi-loader --save

二、封装一个地图组件myamap.vue

引入 AMapLoader

import AMapLoader from ‘@amap/amap-jsapi-loader’;

引入安全秘钥（2021年12月02日后申请的key需要这一步）

<script>
window._AMapSecurityConfig = {securityJsCode: '' // '「申请的安全密钥」',
}
</script>

初始化地图

methods: {initAMap () {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker','AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {// 获取到作为地图容器的DOM元素，创建地图实例this.map = new AMap.Map("amapcontainer", { //设置地图容器idresizeEnable: true,viewMode: "3D", // 使用3D视图zoomEnable: true, // 地图是否可缩放，默认值为truedragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为truedoubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为truezoom: 11, //初始化地图级别center: [108.939645,34.343207], // 初始化中心点坐标 西安})}).catch(e => {console.log(e)})}
}

DOM初始化完成进行地图初始化

在 mouted 生命周期中调用初始化地图方法对页面进行渲染：

 mounted() {// DOM初始化完成进行地图初始化this.initAMap()
}

完整代码如下：

<template><div id="amapcontainer" style="width: 100%; height: 880px"></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {securityJsCode: '' // '「申请的安全密钥」',
}
export default {data() {return {map: null}},methods: {initAMap() {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker','AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {// 获取到作为地图容器的DOM元素，创建地图实例this.map = new AMap.Map("amapcontainer", { //设置地图容器idresizeEnable: true,zoom: this.zoom, // 地图显示的缩放级别viewMode: "3D", // 使用3D视图zoomEnable: true, // 地图是否可缩放，默认值为truedragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为truedoubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为truezoom: 11, //初始化地图级别center: [108.939645,34.343207], // 初始化中心点坐标 西安// mapStyle: "amap://styles/darkblue", // 设置颜色底层})}).catch(e => {console.log(e)})}},mounted() {//DOM初始化完成进行地图初始化this.initAMap()}
}
</script><style lang="less"></style>

在页面中引入地图组件

<template><div><!-- 入门案例引入高德地图 --><map-container></map-container></div>
</template>
<script>
import MapContainer from "@/components/myamap";
export default {name: "homeView",components: { MapContainer },data () {return {}},watch: {},created () { },mounted () { },methods: {}
}
</script><style lang="less" scoped>
</style>

效果如图：

到这里就成功在vue项目中引入高德地图啦。

在vue中引入高德地图相关推荐

vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...

在vue中引入高德地图

一、下载依赖

二、封装一个地图组件myamap.vue

在vue中引入高德地图相关推荐

最新文章

热门文章