vue经纬度精确查询位置,百度地图 vue
最近做个项目，需要实现获取当前位置的经纬度，所以本文主要介绍了某视频剪辑软件中调用百度地图获取经纬度的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目中，需要实现获取当前位置的经纬度，或者搜索某个位置并获取经纬度信息，我使用的的是vue，地图使用的是百度地图。
默认自动获取当前位置经纬度
拖动小红标获取经纬度
关键词查询获取经纬度
前期准备
首先，我们需要取百度官方申请一个地图美国石油学会(美国石油协会)秘钥，https://磅运。百度一下。com/API控制台/密钥进入后在应用管理，我的应用去申请即可。
申请好以后，我们打开某视频剪辑软件项目中公众的文件下的index.html文件，拼接百度阿拉斯加值并引入
脚本类型= text/JavaScript src= http://API。地图。百度一下。com/API？v=2.0 AK=wf kacu 6 V7 aiudnkgtmcqdwbzc 68 kpuxv /script
如上所示，红色区域为阿拉斯加值，自行拼接自己的，可以设置权限为公开或者针对网址白名单。
脚本类型= text/JavaScript src= http://API。地图。百度一下。com/API？v=2.0 AK=wf kacu 6 V7 aiudnkgtmcqdwbzc 68 kpuxv /script
我使用了elementui的弹窗，输入框，提示，如果你没使用elementui，记得更换哦！
超文本标记语言代码
模板
差异
埃尔对话
@close=clearDialog
:close-on-click-modal=false
:title=text
style=text-align: left
:visible.sync=popup
宽度=30%
div class=表单层
el格式标签-宽度= 100像素大小=最小
El-表单-项目标签=获取定位
El按钮类型=主要 @ click=固定位置重新定位/el-button
/El-表单-项目
El-表单-项目标签=当前纬度
p{{latitude}}/p
/El-表单-项目
El-表单-项目标签=当前经度
p { {经度}}/p
/El-表单-项目
埃尔-表单-项目
div class=f-a-c
El-input v-model= keyWords placeholder=请输入地区style= width:230 px；右边距：6px /El-输入
El-button type= primary @ click= set place :disabled=！关键词查询/el-button
/div
/El-表单-项目
/el格式
div id=map/div
/div
div slot=footer class=对话框-页脚
埃尔按钮
大小=小
type=primary
v-if=type！=2
@click=btnSubmit()
确认/el-button
El-button size= small @ click= popup=false 取消/el-button
/div
/el-dialog
/div
/模板
射流研究…代码
脚本
导出默认值{
名称：地图视图，
data() {
返回{
地图：空，
本地：空，
马克：空，
纬度： ,
经度： ,
关键词：""
};
},
方法：{
//打开弹窗，名称为弹窗名称
异步打开对话框(名称){
this.text=name
this.popup=true
这个。init map()；
},
//确认
btnSubmit() {
let key={
纬度：这个。纬度，
经度：这个。经度
}
//打印经纬度
控制台。日志(关键)；
this.popup=false
},
initMap() {
这个. nextTick(()={
this.map=新的BMap .map( map )；
让点=新的BMap .点(116.404,39.915);
this.map.centerAndZoom(point，12)；
这个。地图。enablescrolwheelzoom(true)；//开启鼠标滚轮缩放
this.map.addControl(新BMap .导航控件())；
这个。固定位置()；
});
},
//点击定位-定位到当前位置
fixedPos() {
const _ this=这个
常数地理位置=新的BMap .地理位置();
this.confirmLoading=true
地理定位。getcurrentposition(function(r){
如果(这个。获取状态()==BMAP _状态_成功){
_this.handleMarker(_this，r . point)；
设myGeo=新的BMap .geocoder()；
myGeo.getLocation(
新的BMap .点(r点液化天然气河点lat)，
函数（结果){
_ this.confirmLoading=false
如果（结果){
_这个。纬度=结果。点。lat
_这个。经度=结果。点。液化天然气；
}
}
);
}否则{
_这个$消息。错误(失败这一点。get status())；
}
});
},
//搜索地址
setPlace() {
this.local=新的BMap .本地搜索(this.map，{
搜索完成：这个。搜索地点，
});
这个。本地的。搜索(这个。关键词)；
},
searchPlace() {
if (this.local.getResults()！=未定义){
这个。地图。清除覆盖()；//清除地图上所有覆盖物
if (this.local.getResults().getPoi(0)) {
let point=this.local.getResults().getPoi(0).点；//获取第一个智能搜索的结果
this.map.centerAndZoom(point，18)；
this.handleMarker(this，point)；
console.log(经度： point.lng -纬度点。lat)；
这个。纬度=点。lat
这个。经度=point.lng
}否则{
这个message.error(未匹配到地点!);
}
}否则{
这个message.error(未找到搜索结果!);
}
},
//设置标注
handleMarker(obj，point) {
让那个=这个；
新的BMap .标记（点);
obj。地图。添加覆盖(对象。MK)；
obj。MK . enable拖动()；//可拖拽
obj。MK . addevent侦听器( dragend ，函数(e) {
//监听标注的拖拽，获取拖拽后的经纬度
那个。纬度=e点。lat
那个。经度=e点。液化天然气；
});
obj。地图。panto(点)；
},
}
};
/脚本
半铸钢钢性铸铁(铸造半钢)代码
样式范围。表单层{
宽度：100%;
}
#地图{
边距-顶部：30px
宽度：100%;
高度：300像素
边框：1px纯灰；
框大小：边框-框；
溢出：隐藏；
}
/深/。el-dialog {
最小宽度：550像素；
}
/深/。el-dialog__body {
填充：10px
}
/风格
完整代码
模板
差异
埃尔对话
@close=clearDialog
:close-on-click-modal=false
:title=text
style=text-align: left
:visible.sync=popup
宽度=30%
div class=表单层
el格式标签-宽度= 100像素大小=最小
El-表单-项目标签=获取定位
El按钮类型=主要 @ click=固定位置重新定位/el-button
/El-表单-项目
El-表单-项目标签=当前纬度
p{{latitude}}/p
/El-表单-项目
El-表单-项目标签=当前经度
p { {经度}}/p
/El-表单-项目
埃尔-表单-项目
div class=f-a-c
El-input v-model= keyWords placeholder=请输入地区style= width:230 px；右边距：6px /El-输入
El-button type= primary @ click= set place :disabled=！关键词查询/el-button
/div
/El-表单-项目
/el格式
div id=map/div
/div
div slot=footer class=对话框-页脚
埃尔按钮
大小=小
type=primary
v-if=type！=2
@click=btnSubmit()
确认/el-button
El-button size= small @ click= popup=false 取消/el-button
/div
/el-dialog
/div
/模板
脚本
导出默认值{
名称：地图视图，
data() {
返回{
地图：空，
本地：空，
马克：空，
纬度： ,
经度： ,
关键词：""
};
},
方法：{
//打开弹窗，名称为弹窗名称
异步打开对话框(名称){
this.text=name
this.popup=true
这个。init map()；
},
//确认
btnSubmit() {
let key={
纬度：这个。纬度，
经度：这个。经度
}
//打印经纬度
控制台。日志(关键)；
this.popup=false
},
initMap() {
这个. nextTick(()={
this.map=新的BMap .map( map )；
让点=新的BMap .点(116.404,39.915);
this.map.centerAndZoom(point，12)；
这个。地图。enablescrolwheelzoom(true)；//开启鼠标滚轮缩放
this.map.addControl(新BMap .导航控件())；
这个。固定位置()；
});
},
//点击定位-定位到当前位置
fixedPos() {
const _ this=这个
常数地理位置=新的BMap .地理位置();
this.confirmLoading=true
地理定位。getcurrentposition(function(r){
如果(这个。获取状态()==BMAP _状态_成功){
_this.handleMarker(_this，r . point)；
设myGeo=新的BMap .geocoder()；
myGeo.getLocation(
新的BMap .点(r点液化天然气河点lat)，
函数（结果){
_ this.confirmLoading=false
如果（结果){
_这个。纬度=结果。点。lat
_这个。经度=结果。点。液化天然气；
}
}
);
}否则{
_这个$消息。错误(失败这一点。get status())；
}
});
},
//搜索地址
setPlace() {
this.local=新的BMap .本地搜索(this.map，{
搜索完成：这个。搜索地点，
});
这个。本地的。搜索(这个。关键词)；
},
searchPlace() {
if (this.local.getResults()！=未定义){
这个。地图。清除覆盖()；//清除地图上所有覆盖物
if (this.local.getResults().getPoi(0)) {
let point=this.local.getResults().getPoi(0).点；//获取第一个智能搜索的结果
this.map.centerAndZoom(point，18)；
this.handleMarker(this，point)；
console.log(经度： point.lng -纬度点。lat)；
这个。纬度=点。lat
这个。经度=point.lng
}否则{
这个message.error(未匹配到地点!);
}
}否则{
这个message.error(未找到搜索结果!);
}
},
//设置标注
handleMarker(obj，point) {
让那个=这个；
新的BMap .标记（点);
obj。地图。添加覆盖(对象。MK)；
obj。MK . enable拖动()；//可拖拽
obj。MK . addevent侦听器( dragend ，函数(e) {
//监听标注的拖拽，获取拖拽后的经纬度
那个。纬度=e点。lat
那个。经度=e点。液化天然气；
});
obj。地图。panto(点)；
},
}
};
/脚本
样式范围。表单层{
宽度：100%;
}
#地图{
边距-顶部：30px
宽度：100%;
高度：300像素
边框：1px纯灰；
框大小：边框-框；
溢出：隐藏；
}
/深/。el-dialog {
最小宽度：550像素；
}
/深/。el-dialog__body {
填充：10px
}
/风格
到此这篇关于某视频剪辑软件中调用百度地图获取经纬度的实现的文章就介绍到这了，更多相关某视频剪辑软件调用百度地图获取经纬度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。