您现在的位置是:首页 > Javascript
当前栏目
前端系列——vue2+高德地图web端开发(使用和引入)
2023-03-31 10:43:53 时间
vue2+高德地图web端开发(使用和引入)
前言
本人非专业前端开发,其实是搞后端的,但是正好接了一个项目需要我负责全栈,所以写了这个系列的文章,如果以后项目可以开源我会放出来的
本次我们要实现的是vue2+高德地图的网页开发
基础
本文需要大家系统学过vue以及初步了解高德地图的情况下理解起来会十分省力
准备工作
高德地图的个人开发者注册
高德api网址
1.点击进行注册
2.注册完之后进入控制台
3.创建新应用
4.添加
选择Web端后
高德 2.0 新增
按照步骤全部弄好之后就完成了注册
最后你会获得你注册的key和安全密钥,是我们后面使用的关键
创建vue2的项目
创建项目上我想应该不用怎么交了吧
vue create XXXXx
cd XXXXx
npm run serve
npm 引入高德
官方文档
https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1.安装
打开windows powershell 管理员权限
2.进入项目
3. NPM 方式安装使用 Loader
npm i @amap/amap-jsapi-loader --save
4.在component目录下新建MapContainer.vue
5.编写基础页面结构
div的id是你要自定的,叫什么无所谓但是后面地图初始化的时候需要用到,你只要注意一下就可以
<template>
<div id="container"></div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
6. 在< script >中引入AMapLoader
6.1 import
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
}
</script>
6.2 引入安全密钥
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
完整代码
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
}
</script>
7.构建地图
7.1data数据声明
data(){
return {
map:null
}
}
7.2methods中构建初始化地图方法
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
},
7.3mouted生命周期中调用方法对页面进行渲染
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
完整代码
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
data() {
return {
map: null
}
},
methods: {
initMap() {
AMapLoader.load({
key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [121.473667, 31.230525] //初始化地图中心点位置
})
})
.catch(e => {
console.log(e)
})
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
</script>
<style lang="less">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
vue使用
在我们需要的组件中导入使用MapContainer.vue即可
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
components: {MapContainer}
}
</script>
结果展示
相关文章
- Vue用prerender-spa-plugin做SEO优化
- 从技术专家到技术管理,我对管理的思考
- 使用顶层await简化JS代码
- 担心被问到-反射,我来给你壮壮胆
- 七个关于"this"面试题,你能回答上来吗?
- 新老手必备的34种JavaScript简写优化技术
- 详解使用IOC解耦React组件
- 刚学会深拷贝一个对象,学妹却问我怎么深拷贝一个图
- 好用的JS前端开发框架有哪些?
- 一篇文章带你了解JavaScript cookies
- 使用React Hooks 时要避免的5个错误!
- ES2019 中8个非常有用的功能
- 什么是JavaScript的作用域
- 深入理解JS作用域和作用域链
- 从零开发可视化大屏制作平台
- Node.js知识 — 如何实现线程睡眠?
- 「她」力量:致敬世界第一位自由女程序员
- 2月份GitHub上最热门的JavaScript开源项目
- 怎么理解 onStart可见但不可交互
- 查漏补缺@DateTimeFormat到底干了些啥