这篇文章主要介绍“vue项目中如何使用高德地图”,在日常操作中,相信很多人在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" ></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项目中如何使用高德地图”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。