海创软件组--20200823--Vue使用百度地图获取当前城市--vue项目用vue-particles实现类似博客上的鼠标移动粒子连线动画

一：Vue使用百度地图获取当前城市

1：申请百度地图密匙

我们需要提前在百度地图开放平台申请密匙才能使用对应的接口去获取城市信息。
百度地图开放平台：http://lbsyun.baidu.com/apiconsole/center#/home

注册登录后需要进行开发者认证

主要是需要登记认证身份证，这环节需要身份证照片，认证很快，基本提交了一下就认证成功了。

创建应用

注意！Referer白名单一定要填写正确，域名不对是无法使用定位功能的！没上线的小伙伴如果仅仅是用来本地测试或者学习的就直接填写*，这样不管是什么域名都可以使用定位功能，但上线了就需要自行更改过来

获取密匙AK

---

2：Vue项目使用

下载相应插件

npm install bmap

html文件引入

创建一个新的js文件（下一步需要引入）

export default {
  init: function (){
    const AK = '3s9RVp........';  //你的AK
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if(typeof BMap !== 'undefined') {
          resolve(BMap);
          return true;
        }
        // 百度地图异步加载回调处理
        window.onBMapCallback = function () {
          resolve(BMap);
        };
        let getCurrentCityName = function () {
          return new Promise(function (resolve, reject) {
            let myCity = new BMap.LocalCity()
            myCity.get(function (result) {
              resolve(result.name)
            })
          })
        }
        // 插入script脚本
        let scriptNode = document.createElement('script');
        scriptNode.setAttribute(type, 'text/javascript');
        scriptNode.setAttribute('src', BMap_URL);
        document.body.appendChild(scriptNode);
      });
  }
}

组件引入js并使用

3：效果

---

二：vue项目用vue-particles实现类似博客上的鼠标移动粒子连线动画

1：前言

看到博客中的鼠标移动粒子连线动画后，我非常想将之用于自己写的后台项目中。

2：实现过程

2.1：下载依赖

npm install vue-particles --save-dev

2.2：全局引入

import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

2.3：使用

2.4：效果

2：参数意义

color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"

3：设置背景图

要是还想设置背景的话，可以直接给#particles-js这个id样式中添加背景图片和颜色