引用vue-baidu-map 做一个签到打卡功能

项目中引入 vue-baidu-map

main.js注册

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

// ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */

ak: '需自己申请'

})

组件内引用

<baidu-map

class="map"

:center="center"

:zoom="15"

:scroll-wheel-zoom="true"

@ready="handler"

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

<bm-marker

v-if="initLocation"

animation="BMAP_ANIMATION_BOUNCE"

:position="center"

</bm-marker>

<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="handleLocationSuccess"></bm-geolocation>

</baidu-map>

data 中申请的值

center: {}, // 默认坐标点

abc: {

lng: '',

lat: ''

point: {},

handler ({ BMap, map }) {

map.enableScrollWheelZoom(true)

// map.centerAndZoom('青岛市', 13)

const _this = this

const geolocation = new BMap.Geolocation()

geolocation.getCurrentPosition(function (r) {

_this.point = r.point

_this.center = { lng: r.longitude, lat: r.latitude } // 设置center属性值

_this.initLocation = true

_this.gitGc(r.point)

}, { enableHighAccuracy: true })

window.map = map

// 赋值，方便调用，本节被用到

this.BMap = BMap

this.map = map

gitGc (center) {

new this.BMap.Geocoder().getLocation(center, res => {

this.addr = res.address

})

// 刷新

handleLocationSuccess ({ point, AddressComponent, marker }) {

this.initLocation = false

const _this = this

_this.point = point

_this.center = { lng: point.lng, lat: point.lat } // 设置center属性值

new this.BMap.Geocoder().getLocation(point, res => {

_this.addr = res.address

})

}

引用vue-baidu-map 做一个签到打卡功能相关推荐

Android baidu地图定位实现签到打卡功能（附源码）
导语本章根据baidu地图API,实现打卡功能.用到了基础地图.覆盖物.定位图层.陀螺仪方法.悬浮信息弹框. (这里原创!!!转载请表明我的原文地址~) baidu地图API地址 :Android ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能 1使用webpack下载vue模板 vue init webpack aaa(aaa为项目名称) cd到aaa ...
php 影院选座js代码,在react中用canvas做一个电影院选座功能
又到了每日分享了.这次分享的是:在react中用canvas做一个电影院选座功能. 前言:项目采用create-react-app脚手架,就是做了一个效果所以只有一个页面但是也用了react-rout ...
记录一个菜鸡的大一立项：做一个跑步打卡APP
记录一个菜鸡的大一立项:做一个跑步打卡APP(///▽///) 1. 思路: 2. 具体功能: [ 记录跑步时间.距离] [ 跑步计划制定] [ 跑步路程追踪] [ 跑步信息记录 ] [ 校园景点介绍 ...
用PHP做一个简单的搜索功能
用PHP做一个简单的搜索功能说到搜索,大家最熟悉不过了.当你想知道某个东西,某件事,你也许会刻意搜索它,而搜索作为一项基本的用户必备工具,它有着庞大的知识库,通过各种联动技术,当你输入想要了解的关键 ...
uniappp小程序做一个红包雨的功能
uniappp小程序做一个红包雨的功能需求: 首先,您需要在页面中添加一个画布元素,用于绘制红包雨效果. 在页面加载完成后,使用JavaScript中的setInterval()方法定时执行绘制红包 ...
Android自定义实现按周签到打卡功能
之前实现过<Android可签到的日历控件>的功能,跟这篇一样都是实现签到打卡功能,这篇实现的是按月进行打卡做标识,本篇内容实现的按周进行签到打卡. 实现签到规则如下: 1.连续签到7天, ...

引用vue-baidu-map 做一个签到打卡功能

引用vue-baidu-map 做一个签到打卡功能相关推荐

最新文章

热门文章