vue 实现定位到当前位置

定位的三种实现方法

目前网页定位，使用的是浏览器定位，高德地图定位，百度地图定位，浏览器和高德我都试了，在火狐上是可以的，在谷歌浏览器不可以，高德地图官方解释是：

个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。

vue 获取当前位置经纬度（浏览器定位）
在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图

我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的index.html中引入百度的引用

<!DOCTYPE html>
<html lang="en"><head><meta base="/" id="base" /><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no"/><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title>第一个vue</title><meta name="format-detection" content="telephone=yes"/><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=xxxxx"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxxxxx"></script></head><body>

在vue.config.js里

  //压缩打包文件大小configureWebpack: (config) => {config.externals = {"BMap": 'BMap'

在需要定位的地方。second.vue里使用

<template><div>{{ LocationCity }}</div>
</template>
<script>
export default {name: "home",data() {return {musicTypeJSON: {},searchValue: "",result: [],titleTypeJSON: {}, //热门城市LocationCity: "正在定位...", //一个初始值''};},methods: {city() {//定义获取城市方法const geolocation = new BMap.Geolocation();var _this = this;geolocation.getCurrentPosition(function getinfo(position) {let city = position.address.city; //获取城市信息let province = position.address.province; //获取省份信息console.log(position);// 创建地理编码实例var myGeo = new BMapGL.Geocoder();// 根据坐标得到地址描述myGeo.getLocation(new BMapGL.Point(position.longitude, position.latitude),function (result) {if (result) {_this.LocationCity ="经纬度："+position.longitude+","+position.latitude+",地址："+result.address;;}});},function (e) {_this.LocationCity = "定位失败";},{ provider: "baidu" });},},mounted() {this.city(); //触发获取城市的方法},
};
</script>
<style>
div {word-break: break-all;
}
</style>

vue 实现定位到当前位置相关推荐

vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
获取定位及附近位置 , 输入框搜索附近位置（三种方法）
一 , 前两种方法, 服务器都必须升级到https ,http无法获取定位, 但是http可以在localhost本地浏览器里获取到 (谷歌浏览器localhost也不行 , 火狐浏览器中可以) 二 ...
【Android 逆向】逆向修改游戏应用 ( 分析应用结构 | 定位动态库位置 | 定位动态库中的修改点 | 修改动态库 | 重打包 )
文章目录一.应用结构分析二.定位动态库位置三.定位动态库中的修改点四.修改动态库五.重打包一.应用结构分析分析上一篇博客 [Android 逆向]逆向修改游戏应用 ( APK 解析工具 ...
app 隔几秒记录当前经纬度位置_uni-app获取位置经纬度并定位到当前位置
uni-app使用map组件定位到当前位置并进行标注 manifest.json添加如下内容: 需要定位的页面 style="width: 100vw; height: 100vh;&quo ...
室内定位系列 ——WiFi位置指纹（译）
摘要 GPS难以解决室内环境下的一些定位问题,大部分室内环境下都存在WiFi,因此利用WiFi进行定位无需额外部署硬件设备,是一个非常节省成本的方法.然而WiFi并不是专门为定位而设计的,传统的基于时 ...
HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
物联网-位置信息、定位技术与位置服务
位置信息与位置服务位置信息-从互联网到物联网位置信息在物联网中的作用位置信息是各种物联网应用系统能够实现服务功能的基础位置信息涵盖了空间.时间与对象三要素通过定位技术获取位置信息是物联网应用 ...
微信小程序根据sourceMap 定位代码错误位置
这里先介绍使用微信开发者工具自带的插件定位代码错误位置. 1.下载微信开发者开发者工具(下载地址),菜单-设置-拓展设置-调试器插件 2.登录微信公众平台,下载 sourceMap文件 3.微信开发者 ...
用计算机可以定位到手机吗,如何使用计算机定位手机的位置？
如何使用计算机定位手机的位置? 现在,移动电话已经成为人们随身携带的"手持计算机",并且移动电话的使用更加方便和多样化. 廉价智能手机的兴起激起了一股热情,人们的需求也在增长,用户 ...
微信公众号定位用户所在位置
微信公众号定位用户所在位置最近由于项目的原因,涉及到了微信公众号,看了几天文档加上问了问同事,对这个玩意有一点了解,写一下微信公众号定位的方法,记一下以后方便用. //获取codevar url = ...

vue 实现定位到当前位置

定位的三种实现方法

vue 实现定位到当前位置相关推荐

最新文章

热门文章