vue 获取当前位置经纬度（浏览器定位）
在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图
我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的indexhtml中引入百度的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta base="/" id="base" />
<meta charset="utf-8" />
<meta >
实现此功能，首先请先看下腾讯位置服务的 开发指南 。
本文使用的是方法一（通过iframe内嵌调用）：
参照文档写的例子来用就行，关键是看您拿到数据怎么处理：
组件里面的内容：
验证地址： >
el-dialogd框拖拽
1、在 utils 中新建 directivesjs 文件
import Vue from 'vue'
// 自定义元素实现d框拖拽[重点]
Vuedirective('draw', {
inserted: function(el, binding, vNode) {
elsetAttribute('style', 'position: fixed; z-index: 9999')
},
bind: function(el, bindding, vNode) {
elsetAttribute('draggable', true)
let left, top, width, height
el_dragstart = function(event) {
eventstopPropagation()
left = eventclientX - eloffsetLeft
top = eventclientY - eloffsetTop
width = eloffsetWidth
height = eloffsetHeight
}
el_checkPosition = function() { // 防止被拖出边界
const width = eloffsetWidth
const height = eloffsetHeight
let left = Mathmin(eloffsetLeft, documentbodyclientWidth - width)
left = Mathmax(0, left)
let top = Mathmin(eloffsetTop, documentbodyclientHeight - height)
top = Mathmax(0, top)
elstyleleft = left + 'px'
elstyletop = top + 'px'
elstylewidth = width + 'px'
elstyleheight = height + 'px'
}
el_dragEnd = function(event) {
eventstopPropagation()
left = eventclientX - left
top = eventclientY - top
elstyleleft = left + 'px'
elstyletop = top + 'px'
elstylewidth = width + 'px'
elstyleheight = height + 'px'
el_checkPosition()
}
el_documentAllowDraop = function(event) {
eventpreventDefault()
}
documentbodyaddEventListener('dragover', el_documentAllowDraop)
eladdEventListener('dragstart', el_dragstart)
eladdEventListener('dragend', el_dragEnd)
windowaddEventListener('resize', el_checkPosition)
},
unbind: function(el, bindding, vNode) {
documentbodyremoveEventListener('dragover', el_documentAllowDraop)
elremoveEventListener('dragstart', el_dragstart)
elremoveEventListener('dragend', el_dragEnd)
windowremoveEventListener('resize', el_checkPosition)
delete el_documentAllowDraop
delete el_dragstart
delete el_dragEnd
delete el_checkPosition
}
})
// v-dialogDrag: d窗拖拽
Vuedirective('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = elquerySelector('el-dialog__header')
const dragDom = elquerySelector('el-dialog')
dialogHeaderElstylecursor = 'move'
// 获取原有属性 ie dom元素currentStyle 火狐谷歌 windowgetComputedStyle(dom元素, null);
const sty = dragDomcurrentStyle || windowgetComputedStyle(dragDom, null)
dialogHeaderElonmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = eclientX - dialogHeaderEloffsetLeft
const disY = eclientY - dialogHeaderEloffsetTop
// 获取到的值带px 正则匹配替换
let styL, styT
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styleftincludes('%')) {
styL = +documentbodyclientWidth (+styleftreplace(/\%/g, '') / 100)
styT = +documentbodyclientHeight (+stytopreplace(/\%/g, '') / 100)
} else {
styL = +styleftreplace(/\px/g, '')
styT = +stytopreplace(/\px/g, '')
}
documentonmousemove = function(e) {
// 通过事件委托，计算移动的距离
const l = eclientX - disX
const t = eclientY - disY
// 移动当前元素
dragDomstyleleft = `${l + styL}px`
dragDomstyletop = `${t + styT}px`
// 将此时的位置传出去
// bindingvalue({x:epageX,y:epageY})
}
documentonmouseup = function(e) {
documentonmousemove = null
documentonmouseup = null
}
}
}
})
// v-dialogDragWidth: d窗宽度拖大 拖小
Vuedirective('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = bindingvalue$elquerySelector('el-dialog')
elonmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = eclientX - eloffsetLeft
documentonmousemove = function(e) {
epreventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = eclientX - disX
dragDomstylewidth = `${l}px`
}
documentonmouseup = function(e) {
documentonmousemove = null
documentonmouseup = null
}
}
}
})
2、mainjs中导入：import ‘/utils/directivesjs’
3、使用 el-dialog 的地方加入 v-dialogDrag
<el-dialog
:visiblesync="dialogVisible"
v-dialogDrag>
//
</el-dialog>
自定义元素d框拖拽(重点)
自定义指令的内容，请见utils 中新建 directivesjs 文件
<divclass="drag"v-draw>可拖动窗口</div>
以上就是关于vue怎么定位到变量修改的位置全部的内容，包括:vue怎么定位到变量修改的位置、vue项目中常用到哦，不看看吗、vue使用腾讯地图获取当前位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）