分以下步骤

一、引入高德地图
- 1、在高德地图——控制台——获取key
- 2、npm 安装
- 3、新建一个vue文件作为地图容器
二、引入animate.css动画
- 1、npm 安装
- 2、main.js引入
- 3、使用animate动画
三、手写弹窗组件
- 新建一个文件 pop.vue
总结

一、引入高德地图

1、在高德地图——控制台——获取key

传送门：高德地图
登陆后打开控制台

创建应用

添加服务，获取密钥

2、npm 安装

这里来个官方文档的传送门：高德地图api

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

3、新建一个vue文件作为地图容器

<template><div>// 这个是承载地图的容器<div id="container" style="z-index: 1"></div>//下面这个就是 弹窗组件<pop v-if="isShow" @listenChild="listenChild"></pop></div>
</template><script>import AMapLoader from '@amap/amap-jsapi-loader';import pop from './pop';export default {components:{pop},data(){return{map:null, // 地图maker: null, // 点marker: [118.118174,24.468552], // 中心点icon: null, // 点的样式isShow:false,}},mounted(){//DOM初始化完成进行地图初始化this.initMap();},methods:{// 监听子组件的事件listenChild(e) {this.isShow = e; // 关闭弹窗},// 打开弹窗openPop(e) {console.log(e); // 这里的参数是点击位置的信息，包括经纬度等this.isShow =true; // 打开弹窗},// 绘制地图initMap(){AMapLoader.load({key:"*****************", // 申请好的Web端开发者Key，首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{this.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:14,           //初始化地图级别center:this.marker, //初始化地图中心点位置});// 设置点样式this.icon = new AMap.Icon({image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  // Icon的图像offset: new AMap.Pixel(-13, -30)});// 将 icon 传入 marker，// 官网上还有一个海量标记，意思就是可以一次创建多个点，详细的大家可以自测一下this.maker = new AMap.Marker({position: new AMap.LngLat(this.marker), // 点的位置icon:  this.icon,offset: new AMap.Pixel(-13, -30)});this.maker.on('click',this.openPop); // 给点标记添加点击事件，写入对应函数this.map.add(this.maker); // 添加点标记}).catch(e=>{console.log(e);})},},}
</script>
<style  scoped>#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>

二、引入animate.css动画

这里我采用的是animate的动画库
传送门：animate效果演示网站

1、npm 安装

//由于vue官网引入的是3.5.1版本 所以为了避免踩坑，我这里也用同个版本
npm install animate.css@3.5.1 --save

如果再安装过程中遇到问题：可以看看这里

2、main.js引入

import animated from 'animate.css'
Vue.use(animated)

3、使用animate动画

这里我就不详细写了
重要的事情说三遍！！！
一定不要忘记 animated 这个前缀

// 当你选择好对应的动画效果时，记住他的名字，同时
// 一定不要忘记 animated 这个前缀
<div class="animated bounceInUp"><h4>About Need Cash</h4>
</div>

一定不要忘记 animated 这个前缀

三、手写弹窗组件

新建一个文件 pop.vue

// 为了方便，以下的宽高我都是写死的
<template><div style="position:relative;">//  背景，点击背景通知父组件关闭<div class="mark" @click="closeMark"></div>// 这里的三目判断是控制进出动画效果<div class="img animated" :class="out?'fadeInDown':'bounceOutUp'"><img width="500px" height="300px" src="https://profile.csdnimg.cn/4/2/3/1_fantasywt"/></div></div>
</template><script>export default {name: "pop",data () {return {out:true // 控制动画的样式变量}},methods:{closeMark() {//  这里加个延时，我们的动画需要一秒的时间，如果直接通知父组件关闭，是不会等动画结束再关闭的setTimeout(()=>this.$emit('listenChild',false),1000)this.out = false},}}
</script><style scoped>.mark{z-index: 1000;position:fixed;background-color: rgba(3, 3, 3, 0.3);top:0;left: 0;bottom: 0;right: 0;}.img{position: fixed;top: 20%;left: 50%;z-index: 1050;margin-left: -275px;}
</style>

总结

以上的代码可能有不规范的地方，还请大家睁一只眼闭一只眼
如果有错误的地方欢迎在评论里指出来，一起交流探讨

我是前端入门小白，感谢你们的阅读

vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载相关推荐

Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue 实现高德地图 api 掩模、定位、天气
vue渲染掩模.定位.天气. /* #app.vue中的代码或其他vue文件 #public/index.html需要引入高德地图jsapi*/ <script type="text ...
高德地图自定义车辆定位marker以及弹出框窗口
地图安装 npm install vue-amap --save 项目中设置高德地图安装成功后在main.js设置以下内容 import VueAMap from 'vue-amap' Vue.us ...
高德地图api的使用
众所周知,高德地图作为中国第一家拿到国际GPS卫星定位的厂商,权威性是毋庸置疑的.那么我们改怎么合理利用高德地图api来运用到我们的开发中去,下面我做了个测试,简单介绍一下高德地图api 的使用. 第 ...
Android - 集成高德地图API（搜索，地图，定位）
前言: 今天重构公司app的地图功能,刚好做个教程出来方便大家. 第一步: 注册高德开发用户,并来到控制台,点击应用管理->我的应用,然后创建新应用地址:高德开放平台 | 高德地图API 点击 ...
JS百度地图高德地图API的接入与使用
1.实现功能 1.显示地图移动地图缩放地图拖拽地图显示地图小部件 2.添加删除自定义覆盖物(服务区) 点弹跳动画添加文字标签/图标/ 点聚合 3.点聚合功能 4.弹出文字信息窗口弹出图文信 ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
vue对高德地图的简单使用：点击标记并获取经纬度和详细地址
目录第一步:先按部就班,进入高德开放平台,跟着步骤注册账号,创建应用第二步:用npm下载包,初始化地图第三步:实现点击地图添加标记第四步:点击获取详细地址第五步:搜索获取相关地区提示第六步 ...

vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载

分以下步骤

一、引入高德地图

1、在高德地图——控制台——获取key

2、npm 安装

3、新建一个vue文件作为地图容器

二、引入animate.css动画

1、npm 安装

2、main.js引入

3、使用animate动画

三、手写弹窗组件

新建一个文件 pop.vue

总结

vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载相关推荐

最新文章

热门文章

vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载

分以下步骤

一、引入高德地图

1、在高德地图——控制台——获取key

2、npm 安装

3、新建一个vue文件 作为地图容器

二、引入animate.css动画

1、npm 安装

2、main.js引入

3、使用animate动画

三、手写弹窗组件

新建一个文件 pop.vue

总结

vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载相关推荐

最新文章

热门文章

3、新建一个vue文件作为地图容器