vue项目中使用高德地图的超详细步骤
更新时间：2023年03月27日 11:24:08 作者：＊且听风吟
在vue项目中添加高德地图,对开发地图的开发人员有一定帮助,下面这篇文章主要给大家介绍了关于vue项目中使用高德地图的超详细步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
一、账号准备
首先，需要注册并登录高德地图开放平台，申请密钥。
操作指引：高德地图开放平台
二、安装高德地图加载器
npm 安装：
npm i @amap/amap-jsapi-loader --save
或者 yarn 安装：
yarn add @amap/amap-jsapi-loader --save
安装成功：
三、封装地图组件
1）引入 AMapLoader
import AMapLoader from '@amap/amap-jsapi-loader';
2）引入安全密钥
根据官方文档，申请的 key 需要引入安全密钥一起使用：
<script>
window._AMapSecurityConfig = {
securityJsCode: '' // '「申请的安全密钥」',
}
</script>
3）初始化地图
methods: {
initAMap () {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["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", { //设置地图容器id
resizeEnable: true,
zoom: this.zoom, // 地图显示的缩放级别
viewMode: "3D", // 使用3D视图
zoomEnable: true, // 地图是否可缩放，默认值为true
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
zoom: 11, //初始化地图级别
center: [113.370824, 23.131265], // 初始化中心点坐标 广州
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
})
}).catch(e => {
console.log(e)
})
}
}
4）DOM初始化完成进行地图初始化
在 mouted 生命周期中调用初始化地图方法对页面进行渲染：
mounted() {
// DOM初始化完成进行地图初始化
this.initAMap()
}
5）完整代码
文件 amap.vue：
<template>
<div id="amapcontainer" style="width: 800px; height: 620px"></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.15
plugins: ["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", { //设置地图容器id
resizeEnable: true,
zoom: this.zoom, // 地图显示的缩放级别
viewMode: "3D", // 使用3D视图
zoomEnable: true, // 地图是否可缩放，默认值为true
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
zoom: 11, //初始化地图级别
center: [113.370824, 23.131265], // 初始化中心点坐标 广州
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
})
}).catch(e => {
console.log(e)
})
}
},
mounted () {
//DOM初始化完成进行地图初始化
this.initAMap()
}
}
</script>
<style lang="less">
</style>
四、页面使用
在需要使用的组件中引入amap.vue：
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/amap";
export default {
name: "purchannel",
components: { MapContainer },
data () {
return {
}
},
watch: {},
created () { },
mounted () { },
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
页面效果：
总结
到此这篇关于vue项目中使用高德地图的文章就介绍到这了,更多相关vue使用高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，这篇文章主要介绍了一文掌握vue3中hooks的介绍及用法,需要的朋友可以参考下2023-04-04
本文主要介绍了浅谈Vue组件及组件的注册方法，详细的介绍了什么是组件，及其组件注册的两种方式(全局和局部)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来,下面这篇文章主要给大家介绍了关于利用nginx部署vue项目的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于vue中如何使用$emit传递多个参数的2种方法,在Vue中可以使用$emit方法向父组件传递数据,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue实现生成二维码的简单方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue 通过ref调用router-view子组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
混入mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个混入对象可以包含任意组件选项，接下来通过本文给大家介绍VUE mixin 使用,需要的朋友可以参考下2022-08-08
最新评论