干货分享：vue2.0作移动端开发用到的相关插件和经验总结
最近一直在作移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。通过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添加自定义标注，对地图进行缩放，拖拽等)的相关使用，开阔了本身的知识眼界；现将我开发过程当中积累的相关经验与你们进行分享，但愿和你们一块儿学习和进步....javascript
- vux：Vue 移动端 UI 组件库的使用；
- vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件；
- vuex：vue状态管理工具详细入门；
- async/await：异步神器来封装接口请求文件fetch.js
- vue 项目中的迭代判断技巧；
- vue 项目中经常使用的图片引入方式；
-
微信api在vue项目中的使用：php
1. vue2实现微信分享坑点和经验 ； 2. vue2实现微信支付坑点和经验；
-
百度地图api在vue项目中的使用: css
1. vue2.0项目中如何使用百度地图api 2. vue2如何给地图添加房源覆盖物； 3. 如何给地图添加自定义定位控件并更换控件的图标； 4. 如何给地图添加自定义当前位置定位标注 5. 几个经常使用的api(地图缩放，拖拽，获取当前位置)等功能的实现；
VUX - Vue 移动端 UI 组件库的使用；
vux介绍：详细请参见官方文档。html
因为是作微信公众号移动端项目，咱们对比了几个vuejs的移动端UI库，知道vux是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面；虽然它属于我的维护，体验上须要一些改进。但项目中几个组件的使用，大大提高了开发效率。前端
使用方法以下：vue
- 安装- vux:
npm install vux --save
注意事项：
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照以下代码进行配置：vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照以下代码进行配置：java
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
- 以轮播组件swiper为例
若是你要使用的组件只是在当前页面中使用，咱们能够只在当前页面中引入便可。若是在不少页面中都有使用，能够在main.js中以全局方式引用。使用组件方法以下：webpack
<template>
<swiper auto loop :interval="interval" :duration="duration" id="swiper-banner"
class="swiper-banner"
:height="height">
<swiper-item
class="swiper-demo-img"
v-for="(item, index) in bannerList"
:key="index">
<img :src="item.img">
</swiper-item>
</swiper>
</template>
<script>
import { Swiper, SwiperItem } from "vux";
export default {
name: "swiper",
data() {
interval:4000,// 轮播停留时间
duration:300// 切换动画时间
height:"10.19rem", // 高度值
bannerList:[
{img: 'https://static.vux.li/demo/1.jpg',title: '送你一朵fua'},
{img: 'https://static.vux.li/demo/5.jpg',title: '小花'}
]
}
}
</script>
属性auto,默认为false，表示是否自动轮播；属性loop,默认为false，表示是否循环;git
vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件
官方网址：vue-lazyloades6
介绍：
vue-lazyload主要应用于图片延迟加载。包含以下的特色：
- 小巧轻便，功能强大，易于使用
- 能够用于加载任何图像类型
- 支持Vue 1.0和Vue 2.0
理解图片延迟加载:
当某个网页中呈现的图片较多时，因为网络等缘由，访问该网页时，全部的图片不会立马所有进行显示出来，会出现必定的网络延迟加载的现象，影响用户体验；但咱们能够vue-lazyload插件来实如今图片加载的过程当中，先显示出默认的加载图片，直到图片彻底显示，默认图片消失，这样就会大大的提高用户体验。
使用方法以下：
一、经过npm安装
npm install vue-lazyload -s
二、在main.js中进行引用
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3, // 预压高度的比例
error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标
loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标
attempt: 1 // 图像尝试加载 次数
})
三、在组件中使用
<img v-lazy="item.picUrl" alt="">
四、实现效果之后，还能够根据API进行功能扩展。
相应的参数可参考官方API进行设置。
五、vue-lazyLoad文件整理，请参照：vue2-plugs-demo项目中src/components/LazyLoad/index.vue 和 src/main.js部分；；
vuex:vue状态管理工具详细入门；
vuex介绍：
详细介绍请参见官方网站。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
什么状况下我应该使用 Vuex？
若是您须要构建一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。
使用方法：
- 安装vuex:
npm install vuex --save
- 在mins.js中引用：
import Vuex from "vuex"; Vue.use(Vuex);
理解vuex的5个基本对象：
- state：存储状态。也就是变量；
- getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别能够获取state中的变量和其余的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差很少；
- mutations：提交状态修改。也就是set、get中的set，这是vuex中惟一修改state的方式，但不支持异步操做。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods相似。
- actions：和mutations相似。不过actions支持异步操做。第一个参数默认是和store具备相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
- modules：store的子模块，内容就至关因而store的一个实例。调用方式和前面介绍的类似，只是要加上当前子模块名，如：store.a.getters.xxx()。
vue-cli中使用vuex的方式
通常来说，咱们都会采用vue-cli来进行实际的开发，在vue-cli中，开发和调用方式稍微不一样。
├── index.html
├── main.js
├── components
└── store
├── index.js # 咱们组装模块并导出 store 的地方
├── state.js # 跟级别的 state
├── getters.js # 跟级别的 getter
├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
├── mutations.js # 根级别的 mutation
├── actions.js # 根级别的 action
└── modules
├── index.js # 模块集合
├── m1.js # 模块1
├── m2.js # 模块2
state.js示例：
const state = {
name: 'weish',
age: 22
};
export default state;
getters.js示例（咱们通常使用getters来获取state的状态，而不是直接使用state）：
export const name = (state) => {
return state.name;
}
export const age = (state) => {
return state.age
}
export const other = (state) => {
return `My name is ${state.name}, I am ${state.age}.`;
}
mutation-type.js示例（咱们会将全部mutations的函数名放在这个文件里）：
export const SET_NAME = 'SET_NAME'; export const SET_AGE = 'SET_AGE';
mutations.js示例：
import * as types from './mutation-type.js';
export default {
[types.SET_NAME](state, name) {
state.name = name;
},
[types.SET_AGE](state, age) {
state.age = age;
}
};
actions.js示例（异步操做、多个commit时）：
import * as types from './mutation-type.js';
export default {
nameAsyn({commit}, {age, name}) {
commit(types.SET_NAME, name);
commit(types.SET_AGE, age);
}
};
modules/m1.js示例,m2同理。（若是不是很复杂的应用，通常来说是不会分模块的）：
export default {
state: {},
getters: {},
mutations: {},
actions: {}
};
modules/indes.js,将modules文件集中管理，以下：
import m1 from './m1';
import m2 from './m2';
export default {
m1,
m2
}
index.js示例（组装vuex）：
// 若是项目中，使用的状态管理操做很是频繁，能够将状态管理的对象进行细分，最后聚集以后集中管理；
import vue from 'vue'
import vuex from 'vuex'
import state from './state'
import * as getters from './getters'
import mutations from './mutations'
import actions from './actions'
import modules from './modules'
vue.use(vuex)
export default new vuex.Store({
state,
getters,
mutations,
actions,
modules
})
最后将store实例挂载到main.js里面的vue上去就好了
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
在vue组件中使用时，咱们一般会使用mapGetters、mapActions、mapMutations，而后就能够按照vue调用methods和computed的方式去调用这些变量或函数，示例以下：
import {mapGetters, mapMutations, mapActions} from 'vuex';
/* 只写组件中的script部分 */
export default {
computed: {
...mapGetters([
name,
age
])
},
methods: {
...mapMutations({
setName: 'SET_NAME', // 映射 this.setName() 为 this.$store.commit('SET_NAME')
setAge: 'SET_AGE'
}),
...mapActions([
nameAsyn // 将 this.nameAsyn() 映射为 this.$store.dispatch('increment')
])
}
};
mapGetters，mapMutations，mapActions的使用，至关与将已经定义好的状态管理数据（变量，函数）引用到vue对象的computed和methods中，咱们在页面中，只管使用就行；使用方式，如：
获取computed中的变量：
this.name; this.age;
获取methods中的变量：
this.setName(this.name)；// 映射为 `this.$store.commit('setName', this.name)`
this.setAge();
this.nameAsyn();
总结：
一、若是项目中，使用的状态管理操做很是频繁，能够将状态管理的对象进行细分，如区分不一样的对象文件夹（state,getters,mutations,actions,modules）,最后聚集以后集中管理；
二、若是项目中使用的状态管理的变量较少时，能够采用一个文件进行集中管理；
vuex项目整理，请参照：vue2-plugs-demo项目中src/store 和 src/store2部分；
async/await：异步神器来封装接口请求文件fetch.js
在先后端分离的项目开发中，前端人员若是要经过接口获取后端数据时，咱们通常会独立封装本身的接口异步请求方法，以便在整个项目中都可以轻松的进行引用；
项目中使用async/await 来处理异步请求，封装的方法（utils/fetch.js）以下:
export default async (url = '', data = {}, type = 'POST', method = 'fetch') => {
type = type.toUpperCase()
// get请求须要进行url和参数的从新拼接
if (type === 'GET') {
let dataStr = ''
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
}
}
// 若是支持fecth语法(es7语法)而且请求方式为'fetch'
if (window.fetch && method === 'fetch') {
let requestConfig = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json;charset=UTF-8',
'Content-Type': 'application/json;charset=UTF-8'
},
mode: 'cors',
cache: 'force-cache'
}
// 'POST'请求，将相关的请求参数添加到'body'中。
if (type === 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
// await fetch,以同步的方式将数据（json形式）进行返回，前端经过变量接收便可；
try {
const response = await fetch(url, requestConfig)
const responseJson = await response.json()
return responseJson
} catch (error) {
throw new Error(error)
}
} else { // 若是先浏览器不支持fetch语法，则用es6中promise()来封装异步接口请求；
return new Promise((resolve, reject) => {
let requestObj
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest()
} else {
let ActiveXObject = window.ActiveXObject
requestObj = new ActiveXObject()
}
let sendData = ''
if (type === 'POST') {
sendData = JSON.stringify(data)
}
requestObj.open(type, url, true)
requestObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
requestObj.send(sendData)
requestObj.onreadystatechange = () => {
if (requestObj.readyState === 4) {
if (requestObj.status === 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
console.log(obj)
obj = JSON.parse(obj)
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}
如登陆界面的用到的api,统一管理在login/api/index.js中，以下：
import fetch from "@/utils/fetch";
/**
* 登陆
*/
export const login = (reqData) => fetch("/v2/cotton/user/app_login", reqData);
api统一管理完成以后，咱们须要在页面中进行调用，获取数据，方法以下：
import { getyancode, login } from "./api";
methods: {
async login() {
// 提交时，作验证；
if (this.checkMobile() && this.checkMsgCode()) {
this.loading.show = true;
let reqData = {
phone: mutils.replaceAllSpace(this.telphone),
code: mutils.replaceAllSpace(this.yancode)
};
try{ // try{}catch(){}用于处理异常
const res = await login(reqData);
if (res.status.code == "200") {
console.log('接口请求成功~');
} else {
console.log('接口请求失败~');
}
}catch(err){
console.log(err)
}
}
}
}
经过异步接口请求，咱们就能够获取到相关的数据，开始后续的操做了。
异步接口请求封装方式分析：
async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化。
async的用法，它做为一个关键字放到函数前面，用于表示函数是一个异步函数，也就意味着该函数的执行不会阻塞后面代码的执行。如：
async function timeout() {
return 'hello world'
}
timeout();
console.log('虽然在后面，可是我先执行');
async 函数返回的是一个promise 对象，若是要获取到promise 返回值，咱们应该用then 方法，如：
async function timeout() {
return 'hello world'
}
timeout().then(result => {
console.log(result);
})
console.log('虽然在后面，可是我先执行');
执行结果：
虽然在后面，可是我先执行 hello world
async和await结合使用，await表示等待的意思，注意await 关键字只能放到async 函数里面。如今写一个函数，让它返回promise 对象，该函数的做用是2s 以后让数值乘以2。
// 2s 以后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}
如今再写一个async 函数，从而可使用await 关键字， await 后面放置的就是返回promise对象的一个表达式，因此它后面能够写上 doubleAfter2seconds 函数的调用。
async function testResult() {
let result = await doubleAfter2seconds(30);
console.log(result);
}
如今调用testResult 函数
testResult(); 结果为：60
固然咱们在使用async/await来接口请求时，须要进行异常处理。它用的是try/catch 来捕获异常，把await 放到 try 中进行执行，若有异常，就使用catch 进行处理。
fetch.js文件整理，请参照：vue2-plugs-demo项目中utils/fetch.js 和 src/login部分；
vue 项目中的迭代判断技巧
好比咱们有一个列表，咱们但愿能显示咱们当前选中的那一个，如何实现呢？
基本思路是经过$index来判断是不是当前迭代对象，而后去增减class或者style来实现不一样的样式。
<template>
<ul>
<!-- 方法1 class-->
<li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li>
<!-- 方法2 style-->
<li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li>
</ul>
</template>
<script>
data () {
return {
list: ['a', 'b', 'c'],
activeId: 0
}
}
</script>
vue 项目中经常使用的图片引入方式
- 在img标签中使用图片
data () {
return {
img: require('path/to/your/source')
}
}
而后在template中：
<img :src="img" />
- 以背景图的方式使用图片
data () {
return {
img: require('path/to/your/source')
}
}
<div :style="{backgroundImage: 'url(' + img + ')'}"></div>
或者直接在css中定义
background-image: url('path/to/your/source');
微信api在vue项目中的使用：
- vue2实现微信分享坑点和经验 ；
固然要进行微信公众号开发，前期是要通过用户注册并绑定相关的帐号，才会获得微信官网给出的相关的权限，才能够进行后续的开发流程及api的调用，主体步骤请参见微信公众号技术文档。我在这里，只是介绍注册流程走完以后，如何进行api的调用。
因为在作微信公众号vue2.0前端项目开发，根据产品须要，项目中有一些自定义分享的功能和设计；因为微信自带的分享是一个比较普通，是以它本身的分享机制，只是对某个页面进行一般的呈现。自定义分享，就须要咱们调用微信分享api,进行自定义配置。
分享到微信好友和QQ好友，效果如图：
分享到微信朋友圈，效果如图：
开发步骤以下：
一、在index.html中引入jweixin-1.2.0.js；
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
二、相关微信api配置文件utils/wx.js,以下：
import fetch from "./fetch";
/**
* baseUrl:服务器地址
* shareOosImg：分享默认的图标
* wechatId：申请成功的wechatId
**/
import { baseUrl,shareOosImg,wechatId } from "@/utils/env";
/**
* 获取微信端签名，时间戳等信息
*/
export const getCompactHouseList = (reqData) => fetch("/v2/cotton/user/get_wechat_authorize", reqData);
export function setWxConfig(link, title, desc, pic) {
let url = window.location.href.split("#")[0];
// 公众号申请流程走完以后，官方会给给出一个"wechatId",经过这个参数去请求咱们的后台接口，就会获得相关已经配置好的信息。
getCompactHouseList({ "wechatId": wechatId, "url": url }).then((res) => {
if (res.status.code == 200) {
let wxConfigObj = res.result.parment;
let myLink = link ? link : "";
let myTitle = title ? title : "小爱科技";
let Mydesc = desc ? desc : "惊喜多多!优惠多多!";
let mypic = pic ? pic : shareOosImg;
wxConfig(wxConfigObj, myLink, myTitle, Mydesc, mypic);
}
}).catch((err) => {
console.log(err);
});
};
function wxConfig(wxConfigObj, link, title, desc, pic) {
// 进行初始化配置。
wx.config({
debug: false, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
appId: wxConfigObj.appid, // 必填，公众号的惟一标识
timestamp: wxConfigObj.timestamp, // 必填，生成签名的时间戳
nonceStr: wxConfigObj.noncestr, // 必填，生成签名的随机串
signature: wxConfigObj.signature, // 必填，签名
jsApiList: ["checkJsApi","onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ","chooseWXPay", "chooseImage" ] // 必填，须要使用的JS接口列表
});
wx.ready(() => {
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: pic, // 分享图标
success: function () {
// alert("分享朋友圈成功");
}
});
// 分享给微信朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: pic, // 分享图标
type: "", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 若是type是music或video，则要提供数据连接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
//alert("分享朋友成功");
}
});
// 分享到QQ
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享连接
imgUrl: pic, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.checkJsApi({
jsApiList: ['chooseImage'], // 须要检测的JS接口列表，全部JS接口列表见附录2,
success: function(res) {
console.log(res);
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
wx.error(() => {
});
};
export function chooseWXPay(data, This) {// 支付
wx.chooseWXPay({
timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的全部使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: data.paySign, // 支付签名
success: function (res) {
This.$router.push({ path: "/myReserve", query: { "reserve": "reservation" } });
}
});
};
//拍照或从手机相册中选图接口
export function chooseImage(callback) {
wx.chooseImage({
count: 6, // 默认9
sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
success: function (res) {
callback(res);
}
});
}
三、在main.js中引用以下：
import Vue from "vue"; import * as wx "@/utils/wx"; Vue.use(wx);
三、页面中引用分享方法
注意：若是这个页面，咱们但愿分享出去的内容，是按产品设计的内容，就须要在
方法中调用分享方法；若是咱们不关心这个页面的分享的内容，咱们能够不用调用配置好的分享方法，默认为微信自带的分享。
this.wx.setWxConfig(`${baseUrl}/tuijianDetail`,"我在小爱科技等你来~","惊喜多多！优惠多多！推荐好友关注有红包~");
这样使用微信右上角的分享功能，成功分享出去以后，就能够看到想要的内容了。
- vue2实现微信支付坑点和经验；
同理，微信支付，须要调取微信支付api。因为微信支付api,是在咱们点击按钮时触发，全部就不须要写在 wx.ready(() => {}）里面了。
- 相同的方法定义wx.js中：
export function chooseWXPay(data, This) {// 支付
wx.chooseWXPay({
timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的全部使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: data.paySign, // 支付签名
success: function (res) {
This.$router.push({ path: "/myReserve", query: { "reserve": "reservation" } });
}
});
};
- 页面中调用以下：
this.wx.chooseWXPay(res.result.list,This);
支付成功以后，经过路由跳转到其余页面；
注意：微信api的成功验证，必需要外网地址（可以访问的服务器地址），若是使用本身本机的地址，放到手机上测试，是没法成功的。
百度地图api在vue项目中的使用:
因为最近项目的开发中，要使用到地图进行相关的城市区域，区域中房源数据的显示，所以选择了使用百度地图。
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。
- vue2.0项目中如何使用百度地图api
使用api以前，要注册百度帐号，申请成为百度开发者，获取服务密钥（ak）,才能使用相关的服务功能。
开发步骤以下：
一、申请百度帐号和ak，点我申请
二、准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型，咱们建议您使用最新的符合HTML5规范的文档声明：
<!DOCTYPE html>
三、适应移动端页面展现
下面咱们添加一个meta标签，以便使您的页面更好的在移动平台上展现。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
四、设置容器样式
设置容器样式大小，使地图充满整个浏览器窗口：
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
五、在index.html中引用百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
六、建立地图容器元素
地图须要一个HTML元素做为容器，这样才能展示到页面上。这里咱们建立了一个div元素。
<div id="container"></div>
七、建立地图实例
位于BMap命名空间下的Map类表示地图，经过new操做符能够建立一个地图实例。其参数能够是元素id也能够是元素对象。
var map = new BMap.Map("container");
八、设置中心点坐标
var point = new BMap.Point(116.404, 39.915);
九、地图初始化，同时设置地图展现级别
在建立地图实例后，咱们须要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须通过初始化才能够执行其余操做。
map.centerAndZoom(point, 15);
至此，咱们就快速建立了一张以天安门为中心的地图~
- vue2如何给地图添加房源覆盖物；
如图：
咱们须要地图初始化完成以后，自定义相关的方法，来添加覆盖物；
根据官方文档，自定义标注或地图覆盖物。具体的实现代码，你们能够根据官方api进行开发。
一、定义构造函数并继承Overlay
首先您须要定义自定义覆盖物的构造函数，经过构造函数参数能够传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, length, color){
this._center = center;
his._length = length;
this._color = color;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
二、初始化自定义覆盖物
实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。
当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程当中须要建立覆盖物所须要的DOM元素，并添加到地图相应的容器中。这里咱们选择添加在容器markerPane上。
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
his._map = map;
// 建立div元素，做为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 能够根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 须要将div元素做为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操做此元素。
return div;
}
三、绘制覆盖物
实现draw方法。
到目前为止，咱们仅仅把覆盖物添加到了地图上，可是并无将它放置在正确的位置上。
您须要在draw方法中设置覆盖物的位置，每当地图状态发生变化（好比：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于从新计算覆盖物的位置。
经过map.pointToOverlayPixel方法能够将地理坐标转换到覆盖物的所须要的像素坐标。
// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}
四、移除覆盖物
当调用map.removeOverlay或者map.clearOverlays方法时，API会自动将initialize方法返回的DOM元素进行移除。
map.removeOverlay();
五、添加覆盖物
您如今已经完成了一个完整的自定义覆盖物的编写，能够添加到地图上了。
// 初始化地图
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加自定义覆盖物
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");
map.addOverlay(mySquare);
- 如何给地图添加自定义定位控件并更换控件的图标；
给地图添加自定义控件，须要用到控件类：ZoomControl，使用方法以下：
addControlLocation(){
var that = this;
// 定义一个控件类，即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(20, 50);
}
// 经过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function(map){
// 建立一个DOM元素
var img = document.createElement("img");
img.setAttribute('src',that.locationImg)
// 设置样式
img.style.cursor = "pointer";
// 绑定事件，获取当前城市
img.onclick = function(e){... }
// 添加DOM元素到地图中
map.getContainer().appendChild(img);
// 将DOM元素返回
return img;
}
// 建立控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
this.mp.addControl(myZoomCtrl);
}
在地图初始化完成后，调用addControlLocation()方法便可；
- 添加自定义 当前位置定位标注
如图：
须要用到new BMap.Marker();设置图标大小用 myIcon.setImageSize();
addCurrentMarker(){ // 添加自定义 当前位置定位标注
var myIcon = new BMap.Icon(this.redLocation,{
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
});
// myIcon.setStyle({width: '.666rem', height: '.666rem'});
myIcon.setImageSize(new BMap.Size(60,60)); // 设置 图标大小
let point = new BMap.Point(this.currentPoint.lng,this.currentPoint.lat); // 标注的中心点，应该是始终是用户当前位置
let marker = new BMap.Marker(point,{icon:myIcon}); // 建立Marker标注
this.mp.addOverlay(marker); // 添加当前定位点
},
- 几个经常使用的api(地图缩放，拖拽，获取当前位置)等功能的实现；
-
地图表面触发点击事件：
this.mp.addEventListener("touchstart", () => {}）； -
地图缩放事件：
this.mp.addEventListener("zoomend", () => {}）； - 地图拖拽事件：
this.mp.addEventListener("dragstart",()=>{}）；
this.mp.addEventListener("dragend",()=>{}）；
- 获取用户当前位置(经纬度对象)：
export function getLocationData(fn) {
let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
fn(r.point);
}
});
}
- 根据经纬度解析地址信息，分别返回省市区街等:
let gc = new BMap.Geocoder();//Geocoder地址编码
gc.getLocation(item, function (rs) { //getLocation函数用来解析地址信息，分别返回省市区街等 r.point里有经纬度
let addComp = rs.addressComponents;
let province = addComp.province;//获取省份
let city = addComp.city;//获取城市
});
项目实践：基于vue2.0 +vuex+ element-ui后台管理系统
欢迎加入讨论组，一块儿来学习用vue,vuex,element,express,mongodb来构建后台管理系统；
一块儿来用项目实战加深本身对知识的理解。
- 1. 干货分享：vue2.0作移动端开发用到的相关插件和经验总结
- 2. 干货分享：vue2.0作移动端开发用到的相关插件和经验总结(2)
- 3. 干货分享：vue2.0作移动端开发用到的相关插件和经验总结(更新)
- 4. vue2.0作移动端开发用到的相关插件和经验总结(2)
- 5. vue2.0作移动端开发用到的相关插件和经验总结
- 6. vue2.0移动端开发的相关插件以及经验总结
- 7. 移动端开发干货
- 8. Vue.js开发移动端经验总结
- 9. web移动端开发经验总结
- 10. 干货分享：小程序项目实践和经验总结
- 更多相关文章...
- • ionic 切换开关操作 - ionic 教程
- • 二级缓存的并发访问策略和常用插件 - Hibernate教程
- • NewSQL-TiDB相关
- • PHP开发工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。